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