我們知道，在Vue中，我們可以使用watch屬性來監(jiān)控一個(gè)數(shù)據(jù)的變化。但是有時(shí)候我們需要在Vue實(shí)例創(chuàng)建之后再動(dòng)態(tài)地添加一個(gè)watch。

// 動(dòng)態(tài)添加一個(gè)watch
vm.$watch('a', function (newVal, oldVal) {
// do something
})

在這個(gè)例子里，我們創(chuàng)建了一個(gè)名為a的數(shù)據(jù)，并且動(dòng)態(tài)添加了一個(gè)watch來監(jiān)控這個(gè)數(shù)據(jù)。這個(gè)watch會(huì)在a數(shù)據(jù)發(fā)生改變時(shí)被觸發(fā)。但是，我們也可以使用更加靈活的方式來動(dòng)態(tài)創(chuàng)建watch。

我們先來了解一下Vue中watch的原理。當(dāng)我們?cè)赩ue實(shí)例中使用watch屬性時(shí)，Vue會(huì)為每一個(gè)watch屬性創(chuàng)建一個(gè)Watcher實(shí)例。這個(gè)Watcher實(shí)例會(huì)把我們定義的回調(diào)函數(shù)存儲(chǔ)起來，并且將回調(diào)函數(shù)傳入到數(shù)據(jù)的getter方法中。當(dāng)這個(gè)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)調(diào)用這個(gè)Watcher實(shí)例的update方法來觸發(fā)回調(diào)函數(shù)。

了解了這個(gè)Watcher實(shí)例的原理，我們就可以自己動(dòng)態(tài)創(chuàng)建Watcher實(shí)例并且手動(dòng)觸發(fā)它了。下面是一個(gè)例子：

// 動(dòng)態(tài)創(chuàng)建一個(gè)Watcher實(shí)例
var unwatch = vm.$watch(
function () {
return vm.a + vm.b
},
function (newVal, oldVal) {
// do something
}
)
// 手動(dòng)觸發(fā)這個(gè)Watcher實(shí)例
unwatch()

在這個(gè)例子里，我們使用了一個(gè)匿名函數(shù)作為watch的key，并且將這個(gè)函數(shù)作為參數(shù)傳遞給了Vue實(shí)例的$watch方法。在這個(gè)函數(shù)里，我們通過返回vm.a + vm.b的方式將a和b數(shù)據(jù)的值相加，從而實(shí)現(xiàn)了對(duì)a和b數(shù)據(jù)之和的監(jiān)控。

我們還定義了一個(gè)回調(diào)函數(shù)來處理a和b數(shù)據(jù)之和發(fā)生變化的情況。在這個(gè)回調(diào)函數(shù)中，我們可以執(zhí)行任何我們想要的代碼邏輯。

最后，我們將vm.$watch返回的Watcher實(shí)例存儲(chǔ)在了一個(gè)變量unwatch中，并且在之后使用unwatch()的方式來手動(dòng)觸發(fā)這個(gè)Watcher實(shí)例去執(zhí)行我們定義的回調(diào)函數(shù)。

需要注意的是，我們只能手動(dòng)觸發(fā)這個(gè)Watcher實(shí)例一次。如果需要再次執(zhí)行回調(diào)函數(shù)，我們需要再次調(diào)用vm.$watch來動(dòng)態(tài)創(chuàng)建一個(gè)新的Watcher實(shí)例。