vue中監聽數據變化 watch

今天做項目的時候，子組件中數據（原本固定的數據）需要父組件動態傳入，如果一開始初始化用到的數據、但當時還沒有獲取到，初始化結束就不會更新數據了。只有監聽這兩個屬性，再重新執行初始化。

1、watch是一個對象，對象就有鍵跟值，

　　鍵就是我們要監聽的數據，

　　值可以是函數：當我們監聽的數據發生變化時，需要執行的函數，這個函數有兩個形參，第一個是當前的值，第二個是變化后的值；

　　值也可以是method中的函數名：函數名要用引號來包裹

　　值也可以是包括選項的對象，老厲害了，老厲害了

　　　　選項包含三個：

　　　　A、第一個值handle：其值是一個回調函數，就是監聽對象對話的時候需要執行的函數

　　　　B、第二個值deep：其值true 或者 false，是否深度監聽（一般監聽是不能監聽到對象屬性值變化的，數組除外）

　　　　C、第三個值immediate：其值 true 或者 false，是否以當前的初始值執行handle函數（當值第一次綁定時，不會執行監聽函數，只有值發生改變時才會執行。如果我們需要在最初綁定值的時候也執行函數，則就需要用到immediate屬性。）。

（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,
　　immediate: false,

  }
}

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

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