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