watch深度监听:
watch监听对象,同时用 deep:true 深度监听
监听对象值得变化必须用deep
遇到的问题:如果这个对象内部属性具有数组或者其他的对象,那么通过watch打印出的newValue和oldValue的结果是一样的,因为数据同源。。虽然可以监听到数据发生了变化,但是要比较数据差异就不行了,,如果想要得到差异内容,可以结合计算属性,序列化,反序列化生成新的对象,来避免这个问题
引用:https://blog.csdn.net/qq_35859392/article/details/107552326
遇到的问题2:网页刷新watch会自动执行一次,往往刷新页面的监听是不需要的
解决方法:在watch的方法中判断newValue和oldValue是否一致,或者oldValue原本的值就为null的时候不执行监听操作
引用:https://segmentfault.com/q/1010000006074015
watch原理:
通过官方文档我们知道,当监听的目标用对象进行配置时,共有三个配置属性:watch:{ a:{ handler: function (val, oldVal) { /* ... */ }, immediate:true,//immediate属性为true时,watcher创建后会立刻执行回调 deep: true } }
引用:cnblogs.com/zongzhi/p/14207178.html
代码
computed:{
hqlblNew(){
return JSON.stringify(this.hqlbl)
}
},
watch:{
hqlblNew:{
handler:function(newData,oldData){
// console.log(newData,oldData);
if(newData === oldData || oldData == null ){
return; // 不执行任何操作
}
console.log("我被修改了");
this.isAlter=true;
},
immediate:true,
deep:true
}
},
遇到的问题
watch的 handler 使用的不是 箭头函数,是普通的 function…两个的this指向不同