1.直接监听单个字符串的变化
//value就是需要监听的变量 watch:{ value(){ console.log('1321321321',this.value); } }, //带参数的 watch:{ value(newVal,oldVal){ console.log('1321321321',newVal,oldVal); } },
watch:{ 'value': { immediate: true, deep:true, handler (val) { } } },
watch:{ value: { immediate: true, deep:true, handler (newVal) { console.log('newVal',newVal); } } },
2.监听数组的变化
2.1如果只是想监听数组的长度变化,普通监听即可
watch: { list:{ handler(newVal,oldVal){ console.log(newVal,oldVal); }, } },
2.2监听里面的值变化,需要深度监听deep: true,后面发现监听数组不加deep也可以
watch: { list:{ handler(newVal,oldVal){ console.log(newVal,oldVal); //新旧值不同 }, deep: true, } },
3.监听对象的变化,需要深度监听,用到deep属性
3.1监听整个对象的变化
watch: { obj: { handler(newValue, oldValue) { console.log(newValue,oldValue) //打印出的新旧值一样,后面内容会解决这个新旧值一样的问题 }, // 这里是关键,代表递归监听 obj 的变化 deep: true } },
3.2监听对象中的某个属性变化,
immediate表示在watch中首次绑定的时候,是否执行handler,设置为true则首次就执行
数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。
遇到问题:监听对象时新旧值一样
问题描述:监听对象时新旧值一样
出现原因:
解决方案:
1方法一:使用computed属性将当前的对象进行深拷贝监听computed的值,代码如下:
computed:{ newObj(){ return JSON.parse(JSON.stringify(this.obj)); } }, //添加obj对象的变化 watch: { newObj:{ handler(newVal,oldVal){ console.log(newVal,oldVal); //此时输出的新旧值不同了 }, deep:true } },
方法二:set方法后续更新