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

})

猜你喜欢

转载自www.cnblogs.com/ganmy/p/10644402.html
今日推荐