Vue防坑指南

对象属性添加与删除

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 方法

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 代理

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 修饰符

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

定时器

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

let vm = new Vue({
	mounted() {
		this.timer = setInterval(()=>{},10000)  
	},
	beforeDestory() {
	  clearInterval(this.timer)
	}
})

dom操作

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

let vm = new Vue({
    mounted() {
		this.$nextTick(()=>{
	       ///.......
		})
	}
})

最后，附上我的个人博客地址，欢迎交流。