在Vue中，我們可以使用watch屬性監(jiān)聽對(duì)象或數(shù)組的變化，不過當(dāng)我們要監(jiān)聽一個(gè)JSON對(duì)象時(shí)，watch的行為會(huì)產(chǎn)生一些奇怪的結(jié)果。下面我們將詳細(xì)講述Vue watch json監(jiān)聽的用法和注意事項(xiàng)。

首先我們來看一個(gè)簡(jiǎn)單的例子，假設(shè)有一個(gè)JSON對(duì)象如下：

const json = {
name: 'Tom',
age: 18,
address: {
city: 'BeiJing',
street: 'ChangAn Street'
}
 }

我們要監(jiān)聽該JSON對(duì)象的變化，可以在Vue的watch屬性中寫入watcher函數(shù)定義。

watch: {
json: function(val, oldVal) {
console.log(val, oldVal);
}
 }

在watcher函數(shù)中，第一個(gè)參數(shù)val表示的是新的值，而第二個(gè)參數(shù)oldVal表示的是舊的值。然而，當(dāng)我們?cè)诳刂婆_(tái)輸出改變后的json對(duì)象時(shí)，我們會(huì)發(fā)現(xiàn)輸出的對(duì)象會(huì)自動(dòng)將city和street轉(zhuǎn)化為getter函數(shù)。這是因?yàn)樵赩ue watch JSON對(duì)象時(shí)，如果某個(gè)屬性的值不是基本類型或者數(shù)組時(shí)，Vue會(huì)將該屬性轉(zhuǎn)化為getter函數(shù)來監(jiān)聽該屬性。

這個(gè)行為對(duì)于一些計(jì)算屬性是非常方便的，但是有時(shí)候會(huì)造成一些錯(cuò)誤的輸出。解決方法就是我們可以使用Vue的$watch API，來手動(dòng)地觀察值的變化。這個(gè)API有三個(gè)參數(shù)，第一個(gè)參數(shù)表示要觀察的值，第二個(gè)參數(shù)表示回調(diào)函數(shù)，第三個(gè)參數(shù)表示選項(xiàng)。

this.$watch(() =>{
return this.json
 }, (val, oldVal) =>{
console.log(val, oldVal)
 }, {
deep: true,
immediate: true
 });

在上述代碼中，我們可以通過將JSON對(duì)象封裝到一個(gè)函數(shù)中，然后在Vue實(shí)例中創(chuàng)建一個(gè)$watch函數(shù)來觀察json對(duì)象的變化。同時(shí)我們還可以使用一些選項(xiàng)來設(shè)置屬性。如上述代碼，我們?cè)O(shè)置了deep為true，意味著可以深度觀察JSON對(duì)象的變化，而immediate為true，表示在監(jiān)聽開始時(shí)立刻觸發(fā)回調(diào)函數(shù)。這兩個(gè)選項(xiàng)可以幫助我們更好地觀察JSON對(duì)象的變化。

總而言之，Vue watch JSON監(jiān)聽的行為如果可以理解，對(duì)于我們來說是非常方便的。但是當(dāng)我們遇到一些奇怪的結(jié)果時(shí)，我們需要手動(dòng)地觀察值的變化，用Vue的$watch API來幫助我們。