記錄個人Vue.js從會用到精通之路 6

偵聽器 watch

watch能夠監聽數據的變化來做出相應。

watch的寫法是多種多樣的

watch對象中key是監聽目標，而value值由多種：

• 使用最多的：value是對應的watcher函數

  watch : {
      targetName : function(newValue,oldValue){
          // target的值一旦改變，函數執行。
  
          // 若是target是對象，即便target上的某個屬性改變，因爲對象的指向
             沒變，因此並不會觸發watcher函數。
      }
  }
  複製代碼

• value是方法名

  watch:{
      targetName : 'someMethod'
  }
  複製代碼

• value是對象，使用這種方式，要掌握handler、deep、immediate三個屬性。

  watch:{
      targetName : {
          handler : function(newValue,oldValue){  //... },
          deep : true/false,  
          immediate : true/fasle
      }
  }
  複製代碼

  handler也就是watcher函數，這個就沒必要長篇大論了。

  那這裏的deep屬性與immediate屬性起什麼做用呢？

  咱們先說immediate這個屬性，默認值是false。當咱們將其設置爲true的時候，該回調將會在偵聽開始以後被當即調用！

  這是啥意思呢？

  當它爲false的時候，watcher函數的執行，取決於target的改變。若是它不改變，那咱的watcher函數就沒法執行。可是當它爲true的時候，無論三七二十一，在target成功初始化的時候，就先把watcher函數跑一遍。

  const vm = new Vue({
      el : '.demo',
      data : {
          name : '97T'
      },
      watch:{
          name : {
              handler(newVal,oldVal){
                  console.log('handler is runing!')
              },
              immediate : true
              // 默認值爲false
          }
      }
  })
  複製代碼

  再來看deep這個屬性，默認值是false。官方的解釋是這樣的：

  該回調會在任何被偵聽的對象的 property 改變時被調用，不論其被嵌套多深。

  也就是說即便target的引用值沒有改變，可是監聽器會一層層的往下遍歷，監聽每個屬性，那這樣性能開銷就很是大了。咱們可使用字符串形式監聽來優化：

  const vm = new Vue({
      el : '.demo',
      data : {
          obj : {
              name : 'dog',
              age : 3
          }
      },
      watch:{
          'obj.name' : function(){
              console.log('obj.name is change');
              // 若是obj.age發生改變，並不會觸發這個watcher函數。
          }
      }
  })
  複製代碼

watch註銷

說實話，此次拜讀文檔是我第一次聽這個詞，那一塊兒來看看吧。

一般咱們在開發中，會大量的使用組件，而watch每每都在組件中，它會隨着組件的銷燬而銷燬，每每咱們不須要手動銷燬。

可是！若是你非要按下面這麼寫，咱也不能攔着你！

const app = new Vue({
    //...
})
const unWatch = app.$watch('target',function(){
    //...
})
複製代碼

那這該如何註銷呢？

其實app.$watch調用後的返回值就是對應的註銷方法

unWatch()  //手動註銷
複製代碼

回到咱們昨天的問題：computed VS watch

我的的想法是雖然watch也能夠實現computed，可是他倆各有所長，雖然computed常常使用，可是watch有更適合使用它的地方！