Vue2视频教程系列第十二节—侦听器

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(微信）