Vue觀察對象的子屬性變化，wacth的deep使用

我們都已經知道，如何觀察一個屬性值的變化，然後做相應的操作。比如我有一個屬性name，我希望在name改變的時候，彈出消息框。

代碼如下：

<template>
  <div id="app">
    <input v-model="name"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      name:""
    }
  },
  watch:{
    // 觀察的屬性名
    name(value){
      alert("現在的name是："+value)
    }
  }
}
</script>

顯示效果

 

那麼我現在觀察的不再是name這個屬性，而是person對象裏面的name呢？我們這個觀察又應該怎麼做呢？是不是我們將name改成person就可以了呢？

我們先來試試

<template>
  <div id="app">
    姓名：<input v-model="person.name"/><br>
    年齡：<input v-model="person.age"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      // 由單個屬性變成了一個對象
      person:{
        name:"",
        age:""
      }
    }
  },
  watch:{
    // 如果還是按照原來的思路，這裏應該是換成person就可以了
    // 觀察的屬性名
    person(value){
      alert("我的name是："+value.name)
      alert("我的age是："+value.age)
    }
  }
}
</script>

答案顯然是不行的，我兩個屬性都輸入了，都沒有觸發消息彈出

 

好了，回到正題，關鍵在於watch裏面，應該是這麼寫：

  watch:{
    // 觀察的屬性名
    person:{
      handler(value){
        alert("我的name是："+value.name)
        alert("我的age是："+value.age)
      },
      deep:true
    }
  }

其中，deep:true是關鍵，在Vue的文檔中有說明：爲了發現對象內部值的變化，可以在選項參數中指定 deep: true 。注意監聽數組的變動不需要這麼做。

另外一個關鍵是 handler，根據參考的文章所說，watch 方法在編譯的時候，會寫成handler方法，反正我們當前這麼寫就對了。

我們現在再來看看效果如何：

輸入了name：

輸入age：

目前，無論是name還是age，只要是person下面的屬性被修改了，都會被觀察到。

完整代碼：

<template>
  <div id="app">
    姓名：<input v-model="person.name"/><br>
    年齡：<input v-model="person.age"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      // 由單個屬性變成了一個對象
      person:{
        name:"",
        age:""
      }
    }
  },
  watch:{
    // 觀察的屬性名
    person:{
      handler(value){
        alert("我的name是："+value.name)
        alert("我的age是："+value.age)
      },
      deep:true
    }
  }
}
</script>

 

對於deep的用法，在API裏面也有例子，只可惜目前我還是太渣渣，看了還是不會用。

後來是參考了文章：Vue.js中 watch 的高級用法，才知道是怎麼用的。

參考地址：https://blog.csdn.net/wandoumm/article/details/80259908