vue中有一種數(shù)據(jù)監(jiān)聽工具叫做watch，它可以用來監(jiān)聽數(shù)據(jù)的變化，并做出相應(yīng)的操作。下面我們來學(xué)習(xí)一下watch的相關(guān)用法。

首先，我們需要在vue的實(shí)例中添加一個watch屬性，接著在里面添加需要監(jiān)聽的數(shù)據(jù)和相應(yīng)的回調(diào)函數(shù)。如下所示：

watch: {
'dataName': function(newValue, oldValue) {
// 在這里執(zhí)行相應(yīng)的操作
}
}

在上面的代碼中，dataName就是需要進(jìn)行監(jiān)聽的數(shù)據(jù)，newValue表示新值，oldValue表示舊值。當(dāng)監(jiān)聽到數(shù)據(jù)改變時，會執(zhí)行回調(diào)函數(shù)并傳入這兩個參數(shù)。

除了可以監(jiān)聽單個數(shù)據(jù)，watch還支持監(jiān)聽一個對象中多個屬性的變化。如下所示：

watch: {
'objName.propName1': function(newValue, oldValue) {
// 在這里執(zhí)行相應(yīng)的操作
},
'objName.propName2': function(newValue, oldValue) {
// 在這里執(zhí)行相應(yīng)的操作
}
}

在上面的代碼中，objName是需要監(jiān)聽的對象，propName1和propName2是需要監(jiān)聽的屬性。如果這兩個屬性的值有任何一項(xiàng)改變，對應(yīng)的回調(diào)函數(shù)就會被執(zhí)行。

除了在vue實(shí)例中直接添加watch屬性進(jìn)行監(jiān)聽，還可以在組件中添加watch，這樣就可以對組件內(nèi)部的數(shù)據(jù)進(jìn)行監(jiān)聽了。

export default {
data() {
return {
dataName: ''
}
},
watch: {
'dataName': function(newValue, oldValue) {
// 在這里執(zhí)行相應(yīng)的操作
}
}
}

最后需要注意的是，watch雖然可以用來監(jiān)聽數(shù)據(jù)的變化，但是使用不當(dāng)也會造成性能問題。因此，在使用watch時需要盡量避免在回調(diào)函數(shù)中進(jìn)行耗時操作。