vue容易混淆的点小记

computed、methods及watch函数的差别

computed：基于依赖进行缓存，若依赖不变，则直接调用缓存（适用于性能开销比较大的时候）

methods: 无论数据是否变动，都会进行计算（适用于不须要缓存的时候）

watch: 跟computed有殊途同归之妙，不一样的是，其能够设置中间状态（适用于当数据发生变化时执行异步或者开销较大的操做）

 

数组更新检测

因为js限制，Vue不能检测一下变更的数组：

1.经过索引直接设置一个项，如：vm.items[index] = newValue;

解决方法一：Vue.set(vm.items, index, newValue);

解决方法二：vm.$set(vm.items, index, newValue);   【vm.$set实例方法是全局方法Vue.set的别名】

解决方法三：vm.items.splice(index, 1,  newValue);

2.修改数组长度，如：vm.items.length = newLen;

解决方法：vm.items.splice(newLen);

 

对象更新检测

一样因为js限制，Vue不能检测对象属性的添加或删除

如：var vm = new Vue({

data: {

userInfo:  {

name: '淼淼'

} 

}

})

vm.userInfo.age = 26  // 非响应式，故添加无效

//解决方法一

Vue.set(vm.userInfo, 'age', 26)

//解决方法二

vm.$set(vm.userInfo, 'gender', 'female')

// 添加属性对象

vm.userInfo = Object.assign({}, vm.userInfo, {

'addr': '成都'，

'hobby': '阅读'

})