码迷,mamicode.com
首页 > 其他好文 > 详细

vue--监听器

时间:2018-12-25 13:22:20      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:属性   动作   侦听器   var   一个   methods   打开网页   col   作用   

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--监听器

标签:属性   动作   侦听器   var   一个   methods   打开网页   col   作用   

原文地址:https://www.cnblogs.com/vinieo/p/10173143.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!