vue中计算属性,监听的对象为深度监听,数据会进行缓存,依赖修改了才会进行刷新
watch,监听的对象只是对象的地址,并不会对属性进行监听,如果要监听属性,可以在在方法名为 ‘Obj.attr’ 监听attr属性。可以设置deep为true,不过性能开销比较大,watch当页面刚加载,不会运行,只有当坚挺的对象修改后才会执行,如果要马上执行,可以给immediate设置为true。
页面响应式监听:`
arr1: [1, 2, 3, 4];
通过arr1[0] = 666,无法被监听到
arr2: [
{
name: 'a'
},
{
name: 'b'
}
]
arr2[0].name = 'cc';
此时的更改是可以被监听到,并且触发视图更新
对象已经初始化过的属性被修改,则可以被监听到,如果是新增属性,则监听不到,如果要监听新增的属性,可以用$set方法
watch中监听数组(不需要设置deep为true):
// 通过push,unshift等方法改变数组可以通过watch监听到
this.nameList.push('瑶')
// 直接通过数组下标进行修改数组无法通过watch监听到
this.nameList[2] = '爱'
// 通过$set修改数组可以通过watch监听到
this.$set(this.nameList, 2, '张')
// 利用数组splice方法修改数组可以通过watch监听到
this.nameList.splice(2, 1, '蒋如意')
watch中监听对象属性(需要设置deep为true):
this.$set(Obj, 属性名, value)