重新认识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 返回一个取消观察函数，用来停止触发回调，但是不知道在实例里面怎么操作。