在Vue中，子組件能夠觀察父組件中傳遞進(jìn)來的props的變化，但是孫子組件無法像子組件那樣觀察props的變化。為了解決這一問題，Vue為子組件提供了$watch功能，允許子組件觀察某個(gè)props的變化并執(zhí)行相應(yīng)的操作。

在子組件中使用$watch需要在組件的created生命周期中調(diào)用this.$watch方法。$watch方法中第一個(gè)參數(shù)為觀察的props名稱，第二個(gè)參數(shù)為回調(diào)函數(shù)，即當(dāng)props發(fā)生變化時(shí)需要執(zhí)行的操作。注意，$watch只能觀察子組件中的props變化，而無法觀察data的變化。

created() {
this.$watch('propName', (newValue, oldValue) =>{
// 執(zhí)行操作
})
}

在回調(diào)函數(shù)中，可以接收兩個(gè)參數(shù)：新值和舊值。新值表示props變化后的值，舊值表示props變化前的值。可以根據(jù)這兩個(gè)值來進(jìn)行一些條件判斷和計(jì)算等操作。

created() {
this.$watch('propName', (newValue, oldValue) =>{
if (newValue >oldValue) {
// 執(zhí)行操作
}
})
}

如果需要監(jiān)視多個(gè)props的變化，可以在$watch方法中傳遞一個(gè)數(shù)組，數(shù)組中包含需要監(jiān)視的props名稱?；卣{(diào)函數(shù)中的第一個(gè)參數(shù)將變?yōu)橐粋€(gè)對(duì)象，包含所有被監(jiān)視props的新值和舊值。

created() {
this.$watch(['prop1', 'prop2'], ({ prop1: newProp1Value, prop2: newProp2Value }, { prop1: oldProp1Value, prop2: oldProp2Value }) =>{
// 執(zhí)行操作
})
}

除了$watch外，Vue還提供了一個(gè)$watchGroup方法，允許同時(shí)監(jiān)視多個(gè)props的變化。$watchGroup方法接收一個(gè)字面量對(duì)象，對(duì)象中的每個(gè)鍵都代表一個(gè)props，每個(gè)值為一個(gè)回調(diào)函數(shù)。回調(diào)函數(shù)中的參數(shù)為被監(jiān)視props的新值和舊值。

created() {
this.$watchGroup({
prop1: (newValue, oldValue) =>{
// 執(zhí)行操作
},
prop2: (newValue, oldValue) =>{
// 執(zhí)行操作
}
})
}

$watch和$watchGroup方法都返回一個(gè)解綁函數(shù)，用于取消$watch監(jiān)聽。解綁函數(shù)可以在組件的destroyed生命周期中調(diào)用以避免內(nèi)存泄漏。

created() {
this.unwatch = this.$watch('propName', (newValue, oldValue) =>{
// 執(zhí)行操作
})
},
destroyed() {
this.unwatch()
}