vue中watch

最近寫項目總卡在watch的問題上,是時候整理一波watch了!

 

首先確認 watch是一個對象，必定要當成對象來用。

 

鍵：就是你要監控的那個傢伙，好比說$route，這個就是要監控路由的變化。或者是data中的某個變量。
值:能夠是函數：就是當你監控的傢伙變化時，須要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化後的值。也能夠是函數名：不過這個函數名要用單引號來包裹。
 
 
值是包括選項的對象：選項包括有三個。
1.第一個handler：其值是一個回調函數。即監聽到變化時應該執行的函數。
2.第二個是deep：其值是true或false；確認是否深刻監聽。（通常監聽時是不能監聽到對象屬性值的變化的，數組的值變化能夠聽到。）
3.第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數。

　　

 

watch 裏面還有一個屬性 deep，默認值是 false，表明是否深度監聽，
受現代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。
 
deep的意思就是深刻觀察，監聽器會一層層的往下遍歷，給對象的全部屬性都加上這個監聽器，可是這樣性能開銷就會很是大了，任何修改obj裏面任何一個屬性都會觸發這個監聽器裏的 handler。
優化，咱們能夠是使用字符串形式監聽。
watch: {
 
'obj.a': {
 
handler(newName, oldName) {
 
console.log('obj.a changed');
 
},
 
immediate: true,
 
// deep: true
 
}
 
}

　　

 

 

immediate若是爲true 表明若是在 wacth 裏聲明瞭以後，就會當即先去執行裏面的handler方法

 

註銷watch

爲何要註銷 watch？由於咱們的組件是常常要被銷燬的，好比咱們跳一個路由，從一個頁面跳到另一個頁面，那麼原來的頁面的 watch 其實就沒用了，這時候咱們應該註銷掉原來頁面的 watch 的，否則的話可能會致使內置溢出。好在咱們平時 watch 都是寫在組件的選項中的，他會隨着組件的銷燬而銷燬。
const app = new Vue({
 
template: '<div id="root">{{text}}</div>',
 
data: {
 
text: 0
 
},
 
watch: {
 
text(newVal, oldVal){
 
console.log(`${newVal} : ${oldVal}`);
 
}
 
}
 
});
 
 
 
可是，若是咱們使用下面這樣的方式寫 watch，那麼就要手動註銷了，這種註銷其實也很簡單
const unWatch = app.$watch('text', (newVal, oldVal) => {
 
console.log(`${newVal} : ${oldVal}`);
 
})
 
unWatch(); // 手動註銷watch
 
 
 
app.$watch調用後會返回一個值，就是unWatch方法，你要註銷 watch 只要調用unWatch方法就能夠了。