vue中怎么利用watch監聽數據變化

vue中怎么利用watch監聽數據變化，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

1、watch使用的幾種方法

（1）通過watch監聽data數據的變化，數據發生變化時，就會打印當前的值

watch: {
  data(val, newval) {
    console.log(val)
    console.log(newval)
  }
 }

（2）通過watch監聽docData數據的變化，數據發生變化時，this.change_number++（使用深度監聽）

watch: {
  docData: {
   handler(newVal) {
    this.change_number++
   },
   deep: true
  }
}

（3）通過watch監聽data數據的變化，數據發生變化時,執行changeData方法

watch: {
  data： 'changeData' // 值可以為methods的方法名
}，
methods: {
   changeData(curVal,oldVal){
  　　　 conosle.log(curVal,oldVal)
　　}
}

2、詳解watch中的immediate、handler和deep屬性

（1）immediate和handler

這樣使用watch時有一個特點，就是當值第一次綁定時，不會執行監聽函數，只有值發生改變時才會執行。如果我們需要在最初綁定值的時候也執行函數，則就需要用到immediate屬性。

eg：

watch: {
   docData: {
    handler(newVal) {
      this.change_number++
    },
    immediate: true
   }
}

（2）deep

當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，此時就需要deep屬性對對象進行深度監聽。

eg:
data() {
  return {
    docData: {
      'doc_id': 1,
      'tpl_data': 'abc'
    }
  }
}，
watch: {
   docData: {
    handler(newVal) {
      this.change_number++
    },
    deep: true
  }  
}

設置deep:true則可以監聽到docData.doc_id的變化，此時會給docData的所有屬性都加上這個監聽器，當對象屬性較多時，每個屬性值的變化都會執行handler。如果只需要監聽對象中的一個屬性值，則可以做以下優化：使用字符串的形式監聽對象屬性：

eg:
data() {
  return {
    docData: {
      'doc_id': 1,
      'tpl_data': 'abc'
    }
  }
}，
watch: {
  'docData.doc_id': {
    handler(newVal, oldVal) {
      ......
    },
    deep: true
  }  
}

看完上述內容，你們掌握vue中怎么利用watch監聽數據變化的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！