從新認識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 返回一個取消觀察函數，用來中止觸發回調，可是不知道在實例裏面怎麼操做。