vue--监听器
Posted vinieo
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue--监听器相关的知识,希望对你有一定的参考价值。
vue当中的属性,侦听器watch
computed可以根据数据的变化而变化,而watch也具备同样的功能
既然这么相似,那么两者的区别是什么呢
首先是执行顺序上有一些细微差别,dom加载完成后将立即执行computed再watch
触发事件后,若有methods则先执行再watch
其次watch是更通用的响应数据变化的属性,如果数据变化是异步的,用watch较合适
接下来了解下该如何使用吧
<div id="nieo"> <input v-model="year"> <input v-model="month"> <div id="birth">出生年月:{{year}}年 {{month}}月<div> <div>输入次数:{{count}}</div> <div>
我们希望能实现一个功能,可以实时对输入框的输入次数计数并显示。
之前我们用computed把数据的改变绑定到dom上,这次就用watch来实现这个需求。
watch就像vue中监控或开关一样,只要有某个动作,就会行动。
接下来写js部分的代码:
var change = new Vue({ el:"#nieo", data:{ year:1996, month:7, count:0 }, computed:{ birth () { return this.year + "." + this.month } }, watch:{ year () { return this.count++ }, month () { return this.count++ } } })
完成以后,打开网页看看效果,是不是每次输入都会让count的数值发生变化呢。
注意,watch的使用可以再简化一些,比如像这样:
watch:{ birth () { return this.count++ } }
为什么可以这样写,computed和watch的执行顺序,birth的数据由year和month组成
任何一个发生变化都会使得computed发生作用,而watch又在其后执行
因此,监听birth也能达到同样的效果
原文:https://mp.weixin.qq.com/s/MT2uutHhfkl-TJDHzu3JNQ
以上是关于vue--监听器的主要内容,如果未能解决你的问题,请参考以下文章