Vue深度监听

Vue框架中监听一般写法为:

watch:{a(newVal,oldVal){console.log(newVal);}}

当监听对象的属性时:

watch:{"obj.name"(newVal,oldVal){console.log(newVal);}}

如果需要监听整个对象时：

watch:{obj:{deep:true,//true为进行深度监听,false为不进行深度监听handler(newVal){console.log(newVal);}}}

监听整个对象是一个很消耗性能的操作，当属性改变，整个对象都会监听。

在handler函数中，可以发现handler(newVal,oldVal)中的newVal与oldVal是一样的；如果我们需要使用到未改变之前的值时，就要使用Vue的computed属性了。

computed:{needWatObj(){return JSON.pares(JSON.stringify(this.obj));//深拷贝需要监听的对象数据}},watch(){needWatObj:{deep:true,handler(newVal,oldVal){console.log("已改变的值=>",newVal);console.log("改变前的值=>",oldVal);}}}

如果觉得《Vue深度监听》对你有帮助，请点赞、收藏，并留下你的观点哦！