vue.js 之 watch 詳解

接我上篇博客的例子：

在上面代碼中，當咱們修改 firstName 或 lastName 後，watch 監聽每次修改變化的新值，而後計算輸出 fullName；此時 watch 的一個缺點是，最初綁定的時候是不會執行的，要等到 firstName 或 lastName 改變時才執行監聽計算。

那麼當咱們想要一開始就讓他最初綁定的時候就執行怎麼辦呢？此時咱們就須要改寫一下 watch 方法，以下（immediate：true 屬性）：

 

咱們能夠看到，在此處多了一個 handler 方法，以前咱們寫的 watch 方法其實默認寫的就是這個 handler，vue.js 會去處理這個邏輯，最終編譯出的其實就是這個 handler；

而 immediate：true 表明若是在 watch 裏聲明瞭 firstName 或 lastName 以後，就會當即先去執行裏面的 handler 方法，若是爲 false 就跟咱們以前的效果不同，不會在綁定的時候執行。

deep屬性

watch 裏面還有一個屬性 deep，默認值是 false，表明是否深度監聽，通常用於深度監聽對象屬性；

實際場景展示：當咱們要監聽data 裏面的對象屬性時；

 

場景分析：當咱們在輸入框中輸入數據試圖改變 object.aaa 的值時，咱們發現是無效的。受現代 Javascript 的限制（以及廢棄 Object.observe），Vue 不能檢測到對象屬性的添加或刪除。因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 vue 轉換它，這樣才能讓它是響應的。

默認狀況下 handler 只監聽 object 這個屬性它的引用的變化，咱們只有給 object 賦值的時候它纔會監聽到，好比咱們在 mounted 事件鉤子函數中對 object 進行從新賦值：

 

只有在 mounted 事件鉤子中從新對對象屬性賦值時，纔會觸發 watch 裏面的 handler 方法，打印出 object.aaa changed；上面方法只適用於監聽整個對象發生變化的場景；

那若是當咱們須要監聽 object 裏的屬性 aaa 的值時，此時 deep 屬性就派上用場了~

 

deep：true 的意思就是深刻觀察，監聽器會一層層的往下遍歷，給對象的全部屬性都加上整個監聽器，可是這樣性能開銷就會很是大了，任何修改 object 裏面任何一個屬性都會觸發整個監聽器裏的 handler。固然，爲了性能優化，咱們能夠是使用字符串形式監聽，這樣 vue.js 纔會一層一層解析下去，直到遇到屬性 aaa ,而後纔給 a 設置監聽函數；優化後代碼以下：

 

合理運用watch監聽路由（咱們能夠使用 watch 來進行路由的監聽）：

 

註銷watch

爲何要註銷 watch ？由於咱們的組件是常常要被銷燬的，好比咱們跳一個路由，從一個頁面跳到另外一個頁面，那麼原來的頁面的 watch 其實就沒用了，這時候我i沒呢應該註銷掉原來頁面的 watch 的，否則的話可能會致使內置溢出。不過咱們平時 watch 都是寫在組件的選項中的，他會隨着組件的銷燬而銷燬；

可是，若是咱們使用下面這樣的方式寫 watch ，那麼就要手動註銷了，這種註銷其實也很簡單