watch監聽用來監聽某個prop或data的改變，當它們發生變化時，就會觸發watch配置的函式，從而完成我們的業務邏輯。

watch監聽的資料的回撥函式有兩個引數可用，第一個就是新的值，第二就是舊的值。

1、watch監聽基本例子

<div>
   <p>FullName: {{fullName}}</p>
   <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
 
new Vue({
 el: '#root',
 data: {
  firstName: 'Dawei',
  lastName: 'Lou',
  fullName: ''
 },
 watch: {
  firstName(newName, oldName) {
   this.fullName = newName + ' ' + this.lastName;
  }
 } 
})
 

上面的程式碼的效果是，當我們輸入firstName後，wacth監聽每次修改變化的新值，然後計算輸出fullName。

2、watch監聽的deep屬性

watch 裡面還有一個屬性deep，預設值是 false，代表是否深度監聽，比如我們 data 裡有一個obj屬性：

<div>
   <p>obj.a: {{obj.a}}</p>
   <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
 el: '#root',
 data: {
  obj: {
   a: 123
  }
 },
 watch: {
  obj: {
   handler(newName, oldName) {
     console.log('obj.a changed');
   },
   immediate: true
  }
 } 
})
 

     當我們在在輸入框中輸入資料檢視改變obj.a的值時，我們發現是無效的。Vue 不能檢測到物件屬性的新增或刪除。由於 Vue 會在初始化例項時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 物件上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  deep: true
 }
}

       deep的意思就是深入觀察