vue 深度watch與watch立即觸發回調

基礎用法

搜索框輸入搜索關鍵字的時候，可以自動觸發搜索,此時除了監聽搜索框的change事件之外，我們也可以通過watch監聽搜索關鍵字的變化。

<template>
  <div>
     <span>搜索</span>
     <input v-model="searchVal" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchVal: ''
    }
  },
  watch: {
    // 在值發生變化之後，重新加載數據
    searchVal(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.loadData()
      }
    }
  },
  methods: {
    loadData() {
      // 重新加載數據，此處需要通過函數防抖
    }
  }
}
</script>

立即觸發

通過上面的代碼，現在已經可以在值發生變化的時候觸發加載數據了，但是如果要在頁面初始化時候加載數據，我們還需要在created或者mounted生命週期鉤子裏面再次調用loadData方法。不過，現在可以不用這樣寫了，通過配置watch的立即觸發屬性，就可以滿足了。

export default {
  watch: {
    // 在值發生變化之後，重新加載數據
    searchValue: {
    // 通過handler來監聽屬性變化, 初次調用 newValue爲""空字符串， oldValue爲 undefined
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.loadData()
        }
      },
      // 配置立即執行屬性
      immediate: true
    }
  }
}

深度監聽

一個表單頁面，需求希望用戶在修改表單的任意一項之後，表單頁面就需要變更爲被修改狀態。如果按照上例中watch的寫法，那麼我們就需要去監聽表單每一個屬性，太麻煩了，這時候就需要用到watch的深度監聽deep

export default {
  data() {
    return {
      formData: {
        name: '',
        sex: '',
        age: 0,
        deptId: ''
      }
    }
  },
  watch: {
    // 在值發生變化之後，重新加載數據
    formData: {
      // 需要注意，因爲對象引用的原因， newValue和oldValue的值一直相等
      handler(newValue, oldValue) {
        // 在這裏標記頁面編輯狀態
      },
      // 通過指定deep屬性爲true, watch會監聽對象裏面每一個值的變化
      deep: true
    }
  }
}

隨時監聽，隨時取消，瞭解一下$watch

有這樣一個需求，有一個表單，在編輯的時候需要監聽表單的變化，如果發生變化則保存按鈕啓用，否則保存按鈕禁用。這時候對於新增表單來說，可以直接通過watch去監聽表單數據(假設是formData),如上例所述，但對於編輯表單來說，表單需要回填數據，這時候會修改formData的值，會觸發watch,無法準確的判斷是否啓用保存按鈕。現在你就需要了解一下$watch

export default {
  data() {
    return {
      formData: {
        name: '',
        age: 0
      }
    }
  },
  created() {
    this.$_loadData()
  },
  methods: {
    // 模擬異步請求數據
    $_loadData() {
      setTimeout(() => {
        // 先賦值
        this.formData = {
          name: '子君',
          age: 18
        }
        // 等表單數據回填之後，監聽數據是否發生變化
        const unwatch = this.$watch(
          'formData',
          () => {
            console.log('數據發生了變化')
          },
          {
            deep: true
          }
        )
        // 模擬數據發生了變化
        setTimeout(() => {
          this.formData.name = '張三'
        }, 1000)
      }, 1000)
    }
  }
}

根據上例可以看到，我們可以在需要的時候通過this.$watch來監聽數據變化。那麼如何取消監聽呢，上例中this.$watch返回了一個值unwatch,是一個函數，在需要取消的時候，執行 unwatch()即可取消

你可能不知道的一些Vue實戰技巧