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部分修改如下:


可以看到页面上,达到同样的效果!是不是很神奇呢?这是一个很巧妙的小方法!

就到这里了,休息休息一会儿吧:)


欢迎关注微信公众号:duzhan99

 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 32,434评论 2 89
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 10,082评论 1 52
  • 今天主要讲一下vue的computed这个计算属性的用法 computed属性是实时响应的,当项目开发中依赖某个或...
    独绽2018阅读 500评论 0 0
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,615评论 0 25
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,679评论 0 25

友情链接更多精彩内容