Vue2视频教程系列第十二节—侦听器
2018-09-23 本文已影响13人
独绽2018
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(微信）
