Vue开发常见的100种错误

1.component has been registered but not used:

意思是：组件被注册但是没被使用，一般讲这个组件拿来使用即可，如果使用了还报错那就是使用方式不对，例如：导入的组件名为HeaderChart，那么引用他就应该是<header-chart></header-chart>.

2.Elements in iteration expect to have 'v-bind:key' directives

意思是：元素迭代希望用'v-bind:key' 指示，也就是要绑定一个key值，再迭代中加入:key=

3.The template root requires exactly one element

意思是：这个模板根节点只要求一个元素，即template内部只能有一个根节点元素，不能出现兄弟元素。

4.当调用某个vue内部方法的时候，this指向的vue自定义方法失效了，首先用console.log查看this代表的Vue实例存在的作用于，在此作用域内用变量that代替this指针，之后再失效的方法内部用此变量that来替代this指针，即可实现vue内部方法的调用，但是这种方法无法实时获取vue内部的变量，所以在vue内部调用某个函数，此函数用箭头函数表示，this指向的就是vue实例，然后进行深拷贝，这种方法最好。

5定时器，每次打开都有一个进程将开始，所以如果要提前关闭就必须找到对应的定时器进行操作，可以将定时器绑定到一个对象中，将对象放入vue的data中，利用对象绑定的id找到此对象，再清楚此对象的定时器

6npm run build打包出现如下错误，一般是js引入路径有问题，实时查看下根路径。

7vue双向绑定有时失效，导致某一个被绑定的元素的值发生改变另一个值却未发生变化，或者说被绑定的双方均未发生改变，这时需要进行深度拷贝，例如 this.formdata = Json.parse(JSON.stringfy(this.formdata)

8 elementui rules 验证不能为空一直显示，无法找到原因：将prop绑定的字段与 v-modal绑定的字段名设置成同一个，例如：

9、跨页面调用 store的 mutation方法 this.$store.commit('abc',data)，（法一）

（法二）

import {mapMutations} from 'vuex

methods:{

 ...mapMutations(['sub', 'subN']), 

 handleBtnSub () {

     this.sub() 

 }, 

 handleBtnSubN () {

   this.subN(3) 

 }}

当store中存储值后，重新刷新会导致之前存储在state内部变量的值失效，因为页面重新刷新state内部的变量重新赋值，所以要长期保存的话，就需要对store内部的值进行处理

例如：

state:{

    userInfo:  JSON.parse( sessionStorage.getItem('userInfo') ) || ""      //将sessionStorage中数据取出，放入state内部的变量

}

SET_USERINFO:( state , data )=>{

    sessionStorage.setItem('userInfo', JSON.Stringfy(data))   //将数据存入本地sessionStorage中

    state.userInfo = data

}

这样操作，即可保存store中数据。刷新后，保存的数据依然存在，直到关闭浏览器当前进程，当然也可以使用localStorage 直接替换 sessionStorage，这样的话保存的时候最长（保存时间接近无限久），sessStorage只能临时保存一些数据。

10.清空elementUI的 el-tree组件方法：this.$refs.trees.setCheckedKeys([]); 获取el-tree组件i被选中的值得方法，包含被半选中父节点：

[...this.$refs.trees.getHalfCheckedKeys(),...this.$refs.trees.getCheckedKeys()]

11 再差值模块中，如何调用全局store的某个值呢？如果再图二中template内部的slot-scope=‘scope’直接调用 this.store.getters.merName,将会失效（无法识别）

首先通过computed计算出所需的store内部的值，然后将这个值放入 template 内部即可调用。同理，当父组件要调用子组件的某个变量时，子组件一旦需要进行计算等或者变形等处理，也需要computed方法来实现。