Vue中的watch屬性是用來監(jiān)聽數(shù)據(jù)變化并執(zhí)行相應(yīng)處理的函數(shù),對象(obj)屬性的監(jiān)聽與單個屬性的監(jiān)聽有所不同,需要特別注意。
在Vue中,watch屬性通過設(shè)置一個包含屬性名和處理函數(shù)的對象來實(shí)現(xiàn),可以設(shè)置監(jiān)聽單個屬性、監(jiān)聽深層對象屬性、數(shù)組內(nèi)元素變化等,當(dāng)數(shù)據(jù)發(fā)生變化時,相應(yīng)的處理函數(shù)就會被觸發(fā)。下面是監(jiān)聽一個obj對象的例子:
watch: { obj: { handler: function (newVal, oldVal) { console.log('obj changed', newVal, oldVal) }, deep: true } }
在以上代碼中,我們使用了handler函數(shù)來處理obj對象的變化。deep選項(xiàng)用來指定是否深度監(jiān)聽(即監(jiān)聽obj內(nèi)部屬性的變化)。
下面來看看如何監(jiān)聽obj對象內(nèi)部屬性的變化。我們可以在handler函數(shù)內(nèi)使用computed屬性來設(shè)置依賴關(guān)系,當(dāng)任意一個依賴關(guān)系變化時,computed屬性就會重新計算,觸發(fā)處理函數(shù)的執(zhí)行:
watch: { obj: { handler: function (newVal, oldVal) { this.computedProp++ }, deep: true } }, computed: { computedProp: function () { return this.obj.prop1 + this.obj.prop2 } }
在以上代碼中,我們使用computedProp來定義依賴關(guān)系,并在handler函數(shù)中更新該屬性,達(dá)到監(jiān)聽obj對象內(nèi)部屬性的目的。
另外,我們也可以使用$watch方法來監(jiān)聽obj對象屬性的變化,例如:
this.$watch('obj', function (newVal, oldVal) { console.log('obj changed', newVal, oldVal) }, { deep: true })
在以上代碼中,我們使用$watch方法來監(jiān)聽obj對象的變化,第一個參數(shù)為監(jiān)聽的對象名,第二個參數(shù)為處理函數(shù),第三個參數(shù)為選項(xiàng)。
總之,在Vue中監(jiān)聽obj對象屬性的變化需要特別注意,需要使用deep選項(xiàng)來指定是否深度監(jiān)聽,同時還需要使用computed屬性來設(shè)置依賴關(guān)系,或者使用$watch方法來實(shí)現(xiàn)監(jiān)聽。