Vue2視訊教程系列第十二節—偵聽器
摘要：
Vue2視訊教程系列第十二節—偵聽器
watch提供了一個更通用的方法，來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。今天就講一下watch這個偵聽器是如何為我們工作的。
我們首先講下我們這節課操作內容：當“姓”的輸入框發生變化或者“名”的輸入框...
Vue2視訊教程系列第十二節—偵聽器
watch提供了一個更通用的方法，來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。今天就講一下watch這個偵聽器是如何為我們工作的。
我們首先講下我們這節課操作內容：當“姓”的輸入框發生變化或者“名”的輸入框發生變化，count都會加1, 即計算“姓”或者“名”變化的總次數。
首先，我們還是延用上節課所用的模板：
js部分：
這時候我看到的頁面效果是，不管姓名如何變化，count始終是0 。是的，因為我設定了其一個固定值。接下來讓我們看一下如何讓count動起來！
我們將watch新增進來，想像成一個警報器，或者是一個偵查員，一有情報，立即行動。watch有作用也即如此。因為我們是兩個輸入框，所以要偵聽兩個地方。好，我們改變一下js部分嘍：
看下頁面效果，嗯嗯嗯，不錯不錯，每改動一個地方，count都會隨之加1 。
不要滿足於現狀噢，接下來想想我們這個程式碼還有沒有可以優化的地方呢？我們上節課提到的computed計算屬性，會兼聽fullName，如果firstName或lastName作何一個變化時，fullName才會隨之變化。也就是說，我只要偵聽fullName，就可以偵聽到firstName或lastName變化了。嗯，基於此，我就在watch裡改變一下，看看是否能達到我們的預期呢？js部分修改如下：
可以看到頁面上，達到同樣的效果！是不是很神奇呢？這是一個很巧妙的小方法！
就到這裡了，休息休息一會兒吧：）
歡迎關注前端學習交流群： duzhan2018( 微信）