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': '阅读'

})