首先確認 watch是一個對象，一定要當成對象來用。 

對象就有鍵，有值。

鍵：就是你要監控的那個家伙，比如說$route，這個就是要監控路由的變化。或者是data中的某個變量。
值可以是函數：就是當你監控的家伙變化時，需要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化后的值。

值也可以是函數名：不過這個函數名要用單引號來包裹。 

 第三種情況厲害了。

值是包括選項的對象：選項包括有三個。

1.第一個handler：其值是一個回調函數。即監聽到變化時應該執行的函數。
2.第二個是deep：其值是true或false；確認是否深入監聽。（一般監聽時是不能監聽到對象屬性值的變化的，數組的值變化可以聽到。）
3.第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數。

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  }  }

這樣只會給對象的某個特定的屬性加監聽器

3、總結

數組（一維、多維）的變化不需要通過深度監聽，對象數組中對象的屬性變化則需要deep深度監聽。

以上所述是小編給大家介紹的vue中的watch監聽數據變化及watch中各屬性的詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！