重新认识vue中watch用法
Posted coding个人笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重新认识vue中watch用法相关的知识，希望对你有一定的参考价值。
vue使用了真的很长时间了，但越是使用，越是去看api，就越发现，一直使用的api都仅仅是使用，而且使用的还不够到位。之前分享过计算属性computed和watch的区别，今天因为有个需求使用watch，重新看了一下官网文档，发现对watch一无所知。
watch观察vue实例的变化，回调函数参数为新值和旧值，先看基础写法：
watch:{
msg(a, b){
console.log(a);
console.log(b);
}
},
watch监听的必须是data的数据，当数据发生改变，就会执行。
有配置的写法：
msg: {
handler:(a, b) =>{
console.log(a);
console.log(b);
},
deep: true,
immediate: true
}
deep:为了发现内部值的变化，数组不需要，简单说就是一个对象如果想要监听深层次的变化，想要使用，普通变量是不需要的。
immediate：是否初始化就触发，true为立即执行，注意，如果使用了，新值是undefined。
watch可以监听数组：
watch:{
arr(a, b){
console.log(a);
console.log(b);
},
},
要注意，对象可以直接监听某个key:
watch:{
'obj.a'(a, b){
console.log(a);
console.log(b);
},
},
当a变化的时候是可以监听到的，如果不写deep，是不能监听到的：
watch:{
obj(a, b){
console.log(a);
console.log(b);
},
},
上面obj有变化的时候不执行，下面的方法才会执行：
obj: {
handler: (a, b) => {
console.log(a);
console.log(b);
},
deep: true
}
有一点要注意，在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。这也是为什么说computed性能会好一些，computed是从缓存中获取:
watch:{
obj: {
handler: (a, b) => {
console.log(a);
console.log(b);
},
deep: true
}
},
输出的新值旧值都是一样的
vm.$watch 返回一个取消观察函数，用来停止触发回调，但是不知道在实例里面怎么操作。
（完）
Coding 个人笔记
以上是关于重新认识vue中watch用法的主要内容，如果未能解决你的问题，请参考以下文章