我們都已經知道，如何觀察一個屬性值的變化，然後做相應的操作。比如我有一個屬性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
    }
  }

另外一個關鍵是 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裡面也有例子，只可惜目前我還是太渣渣，看了還是不會用。