vue坑之宝库（持续更新）

1. 使用fastclick 直接外部引入初始化，在手机模式下会报错Cannot read property 'style' of null；还是要npm下载后再import

npm install fastclick --save-dev
<!--main.js-->
import FastClick from 'fastclick'
FastClick.attach(document.body);

fastclick.js移动端WEB开发，click,touch,tap事件浅析

2. created：在实例创建完成后执行的钩子
   mounted：编译好的HTML挂载到页面完成后执行的事件钩子
   它们的共同点是仅在Vue初始化时执行一次。
3. Vue中可以直接调用JS的方法。但如果要调用 Vue中的 methods 中定义的方法就会绕一点，需要使用 this.$options.methods.MethodName();
4. css里面的背景图片就会转成base64，html中的img图片就没转
5. vue props传Array/Object类型值，子组件报错解决办法

  default:function(){
        return [];//或者是return {}
    }

6. vue awesome swiper异步加载数据出现的bug问题
   加载数据之后再把轮播show出来

7. 解决vue-cli项目无法用本机IP访问的问题
   ip改为0.0.0.0就能用自己ip访问了

vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染
https://blog.csdn.net/qq_39692513/article/details/80791458

Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
https://blog.csdn.net/zhouweixue_vivi/article/details/78550738
没用
    watch: {
            broadcastData: {　　　　
                handler(newValue, oldValue) {　　　　　　
                    for(let i = 0; i < newValue.length; i++) {　　　　　　　　
                        if(oldValue[i] != newValue[i]) {　　　　　　　　　　
                            console.log(newValue)　　　　　　　　
                        }　　　　　　
                    }　　　　
                },
        　　　　deep: true　　
            }
        },


Vue 父组件ajax异步更新数据，子组件props获取不到
https://blog.csdn.net/d295968572/article/details/80810349
用长度来判断组件是否显示
暂时先用这个方法，再来研究

再就是vue父组件点击触发子组件事件（https://blog.csdn.net/xiaozhuyirena/article/details/75126177）

通过  ref="child" this.$refs.child.upDate(data) 将数据传过去再加载子组件列表
感觉这个更方便额 不用props 父组件都不用再加个变量了

9. 点击按钮路由跳转，有时出现Loading chunk 6 failed. 再点一下才跳转
   据说是运营商的劫持问题

10. 在Vue中详细介绍$attrs属性
    主要是要解决多层组件的传值，感觉可以就用vuex呗

13. this.route的区别

1. this.$router：

   表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法；

2. this.$route:

   表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法；

14. 同一个component两个页面切换时并不会触发vue的created

我创建和编辑的页面使用的是同一个component,  
默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，  
官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。  
后来发现其实可以简单的在 router-view上加上一个唯一的key，
来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

<router-view :key="key"></router-view>

computed: {
   key() {
       return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
   }
}

作者：花裤衩
链接：https://juejin.im/post/59097cd7a22b9d0065fb61d2
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

15. 组件报错 did you register the component correctly?...

不是啥不能用大写，就是输入组件名turnplateEntry后直接按table生成标签的时候都变成小写了turnplateentry，，蛋疼

16. 过渡效果

<transition name="fade"></transition>

包住要过渡效果的代码或是组件

在common.css里面加上样式，所有地方都能用
.fade-enter-active,
.fade-leave-active {
   transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
   opacity: 0;
}

17. 多个click事件 @click="a();b()"，不能写多个@click
18. 公共方法

Vue.prototype.aaa = function(){
    
};

可以用一个commonjs来放，然后统一挂载
//公共方法，调用方法，this.$comjs.xxx
import comJs from '@/utils/common'
Vue.prototype.$comjs = comJs;

19.监听store中的数据变化

vuex中的state在组件中如何监听？

用computed计算属性与watch

computed: {
   getGameNo() {
       return this.$store.getters.popLogin.gameNo
   }
},
watch: {
   getGameNo(val) {
       this.myGameNo = val;
   }
},

20. this.$route.query.token 会获取到url上所有的token，两个的话就会以逗号分隔token1，token2；导致在请求的时候，传入的token参数，会变成

token[0]: 35385ac93a8d4fadbe5e671d0a2dcf6d
token[1]: 35385ac93a8d4fadbe5e671d0a2dcf6d

导致接口返回出错；

http.params('token')则获取的是第一个token；
出现两个token的原因是qq等第三方登录后，返回的链接会在后面加上token，再在这个页面用第三方登录的话就又在后面加上了token
解决办法：第三方登录时传入的url过滤掉token

21. 组件里面有请求，如果v-if写在组件内，则组件没显示也会请求；v-if写在父级内，则只有组价显示的时候再请求，也就是v-if写在组件内，组件未显示也会加载，并且每次组件隐藏后的显示都会触发created等
22. linux 区分大小写 ，import的时候要注意大小写
23. 事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

24. 动态设置元素高度，用:style,有计算的话，不能写在data里面，要写在computed

<div class="progress-progress" :style="{width: progress}"></div>


<div class="levelNow" :style="levelNowStyle"></div>

data() {
    return {
        showLevel: true,
        level: 9,
        progress:'50%'
        
    }
},
computed: {
    levelNowStyle() {
        return {
            'height': this.level + .9 - 1 + 'rem'
        }
    }
},

25.js加载本地图片再设置到img上，为了在获取不到用户图片的时候显示本地的默认图片
Vue.js中的图片引用路径

方法一
import defaultAvatar from '@/assets/images/defaultAvatar.png'
data() {
    return {
        defaultAvatar:defaultAvatar

    }
}
<div class="u-avatar"><img :src="defaultAvatar"  alt="美美的头像" /></div>
或是加判断
<div class="u-avatar"><img :src="vipInfo.headImageUrl || defaultAvatar"  alt="美美的头像" /></div>

有没有更简便的方法？

方法二
放到static里面引入，assets里面的会被构建，static里面的则是原封不动放过去
data里面 imgUrl ： '../../static/logo.png'
<img :src="imgUrl" />
或是加判断
<div class="u-avatar"><img :src="vipInfo.headImageUrl || '../../../static/img/defaultAvatar.png'"  alt="美美的头像" /></div>

26. vue 插件与组件的区别。插件还要用vue.use来注册

简单来说，插件就是指对Vue的功能的增强或补充。
比如说，让你在每个单页面的组件里，都可以调用某个方法，或者共享使用某个变量，或者在某个方法之前执行一段代码等
你也可以写一个插件，在Vue原型上扩展方法，要实现这个需求绝对没法写成组件。

如我要写一个每个页面都可能出现的弹窗，使用组件还是插件。
现在是组件，要在app.vue中加上login这个标签，要不就用插件的方式试试，再理解，插件也是要加上标签呀
插件通常会为 Vue 添加全局功能。 官网有这句话

27. Vue style里面使用@import引入外部css, 作用域是全局的解决方案,未测试
28. 在vue文件style中引入less不能用@符号作为路径 要用../

<style scoped lang="less">
@import "@/assets/css/common.less"; 这样不行 @的定义难道只在js和tem中有效？
@import "../assets/css/common.less";这样可以

30. vux

需要npm install vux-loader --save-dev
npm install vux --save

再将build/webpack.base.conf.js
//将module.exports = {
改为
const originalConfig = {

底部加上
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})
开局还真是麻烦呀，不然各种报错

31. store.dispatch的异步问题

为了保证在设置store的数据后再执行其他操作
store.dispatch('setToken', -1).then(()=>{
    $comjs.delTokenReload()
})

32. 引入static/img里的图片 路径用../../等相对路径导致打包后路径错误，解决办法为直接用 /static/img --不行啊 混蛋，还是先用线上链接顶上吧，反正只有一个

33. 另外发现 如果用户开始是试玩用户，点击微信登录后（用户头像已显示），马上将微信进程关掉，再进去也还是试玩账号，微信登录后过3s后再关闭则不会有问题，以上问题出现在ios的微信上，安卓的没问题，现在原因未知，可能和微信自身机制有关系，同样操作在qq上用qq登录没问题
    在微信上 感觉设置cookie有延迟，点击微信登录，跳转头像显示出来后，再关掉微信的进程，再进去还是临时账号，感觉是cookie还没设置好

34. vue风格指南

永远不要把 v-if 和 v-for 同时用在同一个元素上。外面加一层写v-if
总是用 key 配合 v-for。

35. 在单文件组件中没有内容的组件应该是自闭合的。

<!-- bad -->
<my-component></my-component>

<!-- good -->
<my-component />

35. 组件选项应该有统一的顺序。

export default {
  name: '',

  mixins: [],

  components: {},

  props: {},

  data() {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
};

36. 再次理解一下vuex，如token初始化只有在页面加载的时候一次，以后如果只是路由跳转就不会，一开始想的是万一token在某个组件上有更新再通过url传给下个组件，那下个组件的token还是取得老的，所以想把getters方法里面的token改为initToken（），那这样state.token就没用了呀，现在想到，通过url穿入的token只有可能是新的页面跳转，如果是我内部的路由跳转，token就直接用actions了，不会走url了。
37. 在外部css中引入背景图片，一直报错（暂未解决）现在是把公共样式里设置背景图的代码移到了app.vue里面
    生成的css文件中background url()图片路径问题 这个下面倒是有个很多赞的答案，但我随便试了一下没成功，改了build/utils.js之后，在css里的图片该怎么引入呢
    Vue项目中设置背景图片像这种通过js变量再去设置背景图的办法很麻烦呀
38. 向组件内添加html元素 用 <slot></slot>
39. 路由跳转 this.$router.push(location) <router-link :to=""></router-link>
    router-link API 参考
40. 一个困扰了我十分钟的问题，上面两种路由跳转都不跳转，很是诡异，排查了半天，终于是在main.js中发现

router.beforeEach((to, from, next) => {


})
我以为为空的话，就什么都不改变，结果是也不跳转了

40. vue字体文件如何取消每次构建后的版本号变化，（可能文件不变，版本号没变，需测试），再就是可以直接丢到static中
41. img标签加载的图片不知为何会过几秒就重新加载一次，页面无反应，但资源一直在请求 只有turnplate有；
42. 在this.$store.dispatch回调里面执行之后的操作,防止异步的问题

this.$store.dispatch('setUserInfo','45456').then(()=>{
    
})

43. 动态import；头部的import XXX from "xxx"应该是同步的

//设置用户信息后需要重置下ajax请求头的信息
import('@/utils/http').then(res => {
    res.resetHeaders()
})

44. 在store里面引入 其他js文件，那个文件又有用到store，那这个就store就undefined了；可以用上面的动态import
45. 记得清楚定时器

beforeDestroy() {
    //清除跑马灯的定时器
    clearInterval(this.interval_marquee)
}

46. 滚动行为
    使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
48. 引入字体报警告 Failed to decode downloaded font 是因为没有写format

@font-face {
    font-family: 'roman';
    src: url('~assets/fonts/roman.ttf') format('TTF');
    //format写TTF不行滴，就没有生效 要写truetype
    src: url('~assets/fonts/roman.ttf') format('truetype');
    但是写了truetype后 又开始报警告了
}
另外 woff 是 format('woff')
eot是format('embedded-opentype')
svg是format('svg')

49. css里面图片的引入问题，改过了 build/utils.js=> lessResourceLoader忘记来里面加publicPath: '../../'了，

50. 注意区分文件的大小写，因为我们是在服务器构建，是严格区分大小写的

51. vue 计数 跳动 插件 decimal几位小数就设置这个
52. 使用better-scroll后滚动区域的文字就不能长按复制了

加上这个就好了 里面的div、p、span、i标签是我自己加的，不确定是否有什么问题
preventDefaultException: {
    tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|DIV|P|SPAN|I)$/
}

scroll组件内的文字在浏览器中无法选中复制
使用preventDefaultException无效

53. 避免内存泄漏
    在 Windows 上则是 Shift+Esc 快捷键打开 Chrome 任务管理器
54. vue 动态替换路由(地址栏)参数

import merge from 'webpack-merge'；
 
修改原有参数        
this.$router.push({
    query:merge(this.$route.query,{'maxPrice':'630'})
})
 
新增一个参数：
this.$router.push({
    query:merge(this.$route.query,{'addParams':'我是新增的一个参数，哈哈哈哈'})
})
 
替换所有参数：
 this.$router.push({
    query:merge({},{'maxPrice':'630'})
})

55. 在reset.less中的html,body,div...加了font-size或是font-family 会导致这些标签加载多次重置样式，导致继承于父级的样式字体大小会被重置；

56. <template></template> 中用循环，不能有key

57. axios全攻略

58. style中引入图片或less要加上 ~;template中直接用 @

@import '~@/assets/less/var.less';

background: url("~@/assets/images/yuan@2x.png") no-repeat;

59. 计算属性传参数

:data="closure(item, itemName, blablaParams)"

computed: {
 closure () {
   return function (a, b, c) {
        /** do something */
        return data
    }
 }
}

我估计，vue内部会把接受到闭包的参数，再调用apply 的时候带上去，只不过，从标准上来说，computed传参不太合规矩，所以文档内就没说这样和用方法没区别了吧，用不了computed的缓存

这样和用方法没区别了吧，用不了computed的缓存
有缓存的 我做过实验 你也可以尝试一下

60. 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
61. 可以定义重复的路由，且先定义的有效
62. chooseJob-popup 在组件名中驼峰和横杠不能混用
63. vue获取元素宽、高、距离左边距离，右，上距离等还有XY坐标轴;this.refs.journalUpward.getBoundingClientRect().top
64. vue路由传参方式,vue路由传参常用的三种方式
    路由传参数，不用？问号，通过path跳转

getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/describe/${id}`,
    }
 
}

对应路由配置如下：
{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

接收参数
$route.params.id