Vue防坑指南

发表于 | 更新于 | 分类于 | 评论数：



对象属性添加与删除

1
2
3
4
5
6
7
8
9
10
11
let vm = new Vue({
	data() { 
  	return {
    	a
    }
  }
})
vm.b = "xxxx" //非响应
vm.a = "xxx" //响应

vm.$set('b',"xxxx")//响应

Vue 不能检测以上属性添加或删除的变化，必须使用 Vue.set 或者 vm.$set 设置属性

数组更新检测

Vue 无法检测到以下更新：

  • 单独设置数据中某一项元素
  • 变更数据长度

替代的解决方案是使用 vm.$set 方法,删除数据某一项使用 splice 方法

1
2
3
4
5
6
7
8
9
10
11
12
let vm = new Vue({
	data() {
  	return {
    	items:[]
    }
  }
})
vm.$set(vm.items,index,item)
vm.items.splice(newLength)
vm.items.splice(itemIndex,1)
vm.items.push(item)
...

变量命名

以”_”,”$”为开头命名的变量不会被 Vue 代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let vm = new Vue({
  template:`
		<div>
		<span>{{_a}}</span>
	<span>{{$b}}</span>
</div>
`,
	data() {
  	_a:1,
     $b:2
  }
})
vm._a = 3 //不会响应
vm.$b = 4 //不会响应

事件绑定

在自定义 Vue 组件上绑定原生事件需要加 .native 修饰符

1
<my-component @click.native="handleClick"></my-component>

定时器

组件内部创建的定时器要及时销毁，防止内存溢出

1
2
3
4
5
6
7
8
let vm = new Vue({
	mounted() {
  	this.timer = setInterval(()=>{},10000)	
  },
  beforeDestory() {
  	clearInterval(this.timer)
  }
})

dom操作

需要在dom操作之后执行的操作要放到$nexTick中执行

1
2
3
4
5
6
7
let vm = new Vue({
	mounted() {
  	this.$nextTick(()=>{
    	///.......
    })
  }
})