Vue2視頻教程系列第十二節(jié)—偵聽器

watch提供了一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。今天就講一下watch這個偵聽器是如何為我們工作的。

? ? ? ?我們首先講下我們這節(jié)課操作內(nèi)容：當(dāng)“姓”的輸入框發(fā)生變化或者“名”的輸入框發(fā)生變化，count都會加1,?即計算“姓”或者“名”變化的總次數(shù)。

? ? ? ?首先，我們還是延用上節(jié)課所用的模板：

js部分：

這時候我看到的頁面效果是，不管姓名如何變化，count始終是0?。是的，因為我設(shè)置了其一個固定值。接下來讓我們看一下如何讓count動起來！

?我們將watch添加進(jìn)來，想像成一個警報器，或者是一個偵查員，一有情報，立即行動。watch有作用也即如此。因為我們是兩個輸入框，所以要偵聽兩個地方。好，我們改變一下js部分嘍：

看下頁面效果，嗯嗯嗯，不錯不錯，每改動一個地方，count都會隨之加1?。

?不要滿足于現(xiàn)狀噢，接下來想想我們這個代碼還有沒有可以優(yōu)化的地方呢？我們上節(jié)課提到的computed計算屬性，會兼聽fullName，如果firstName或lastName作何一個變化時，fullName才會隨之變化。也就是說，我只要偵聽fullName，就可以偵聽到firstName或lastName變化了。嗯，基于此，我就在watch里改變一下，看看是否能達(dá)到我們的預(yù)期呢？js部分修改如下：

可以看到頁面上，達(dá)到同樣的效果！是不是很神奇呢？這是一個很巧妙的小方法！

就到這里了，休息休息一會兒吧：）

歡迎關(guān)注微信公眾號：duzhan99

?