vue中如何利用watch監聽數據變化

這篇文章主要介紹“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監聽數據變化”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。