vue 的watch用法

　　參考轉自https://www.imooc.com/article/details/id/28187

　　類型：{ [key: string]: string | Function | Object | Array }

　　詳細：一個對象，鍵是須要觀察的表達式，值是對應回調函數。值也能夠是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每個屬性。

　　備註：watch主要用於監控vue實例的變化

1、簡單應用

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
})

　　上面的代碼的效果是，當咱們輸入firstName後，wacth監聽每次修改變化的新值，而後計算輸出fullName。

2、高級應用

　　2.1 handler方法和immediate屬性

　　watch 的一個特色是，最初綁定的時候是不會執行的，要等到 firstName 改變時才執行監聽計算。那咱們想要一開始就讓他最初綁定的時候就執行改怎麼辦呢？咱們須要修改一下咱們的 watch 寫法，修改事後的 watch 代碼以下：

watch: { 
 firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, // 表明在wacth裏聲明瞭firstName這個方法以後當即先去執行handler方法
    immediate: true
 } }

　　注意到handler了嗎，咱們給 firstName 綁定了一個handler方法，以前咱們寫的 watch 方法其實默認寫的就是這個handler，Vue.js會去處理這個邏輯，最終編譯出來其實就是這個handler。

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

　　2.2 deep屬性

　　watch 裏面還有一個屬性 deep，默認值是 false，表明是否深度監聽, 在data數據裏有對象Object，對象裏面的數據沒法監聽到，這時候就須要深度監聽。

　　數組（一維、多維）的變化不須要經過深度監聽，對象數組中對象的屬性變化則須要deep深度監聽。

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123,
      b: 'hellow',
      c: 'world'    
    }
  },
  watch: { 
    obj: { //這是對obj的全面監控，裏面任意的改變都會觸發watch監控。
      handler(newName, oldName) {
         console.log('obj changed');
      },
      immediate: true,
      deep: true
    }，
    'obj.a': { //這是對obj.a的監控，obj.a改變觸發watch監控。鍵路徑必須加上引號
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true,
      deep: true
    } 
  } 
})
vm.$watch("obj",function(val,oldval){
　　console.log(val)
})//主動調用$watch方法來進行數據監測

　　2.3 註銷watch

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

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

//watch註銷
const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})

unWatch(); // 手動註銷watch

　　app.$watch調用後會返回一個值，就是unWatch方法，你要註銷 watch 只要調用unWatch方法就能夠了。

　　注意，不該該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例，this.updateAutocomplete 將是 undefined。