很多人習慣用watch，但是卻很少有人知道watch的真正觸發條件。如果不是對vue原理了如指掌，請謹慎使用watch。

示例1，下面會觸發watch 嗎？

<script>
 new Vue({
 data() {
  return {
  city: {id: 1,name: 'Beijing'}
  }
 },watch: {
  city() {
  console.log('city changed')
  }
 },created() {
  this.city = {id: 1,name: 'Beijing'}
 }
 })
</script>

會觸發，因為在created方法裡面重新給city賦值了一個物件，city前後的指向不同了

示例2：

<script>
 new Vue({
 data() {
  return {
  city: {id: 1,created() {
  this.city.name = 'Shanghai'
 }
 })
</script>

不會觸發， 因為created方法執行之後， city的指向沒有變

如果我們期望捕獲這種更新，應該這樣寫程式碼：

watch: {
 city: {
  handler: () => console.log('city changed'),deep: true
 }
}

將選項deep設為true能讓vue捕獲物件內部的變化。

下面討論一下watch一個數組：

<script>
new Vue({
 el: '#body',data() {
  return {
   cities: ['Beijing','Tianjin']
  }
 },watch: {
  cities() {
   console.log('cities changed')
  }
 }
})
</script>

那下面哪些操作會觸發cities的watch回撥呢?

this.cities = ['Beijing','Tianjin']
this.cities.push('Xiamen')
this.cities = this.cities.slice(0,1)
this.cities.pop();
this.cities.sort((a,b)=>a.localeCompare(b));
this.cities[0] = 'Shenzhen'
this.cities.splice(0,1)
this.cities.length = 0

答案是隻有最後三行不會觸發。

補充知識：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.watch的觸發條件是什麼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。