vue watch监听方法总结

 更新时间:2022年05月08日 17:26:53   作者:前端小彭  
这篇文章主要给大家分享的是vue watch监听方法总结,侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时执行。监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值。下面我们就一起进入文章了解更具体的内容吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

vue中,使用watch来响应数据的变化,关于watch的用法大致有三种。

1.vue中的watch作用就如其命名就是监听的作用

比如有个对象:

1
2
3
4
watchData: {
    name: '',
    age: '',
}

2.监听这个对象的属性

1
2
3
4
5
6
watchData: {
    handler: function() {
        console.log();
    },
    deep: true
}

监听对象可以用deep,深度监测,不然监测不到对象的变化

3.监听这个对象的属性

方式一:

1
2
3
4
5
watch: {
 'watchData.name'(newValue, oldValue) {
     console.log(newValue);
 }
}

方式二:

1
2
3
4
5
6
7
watch: {
    'watchData.name': {
        handler: function() {
            console.log();
        }
    }
},

为什么要监听对象的属性,监听对象的话,一旦对象内部的任何数据变化,都会导致watch重新执行,这样的话可能不是你想要的监听某一个属性变化才执行watch,或者是一旦说对象内部任何一个属性变化就让其watch执行,也会对性能有一定性的损耗,所以我们用这种监听对象单个属性的方式来处理,给要监听的“对象.属性,用引号包裹起来”

4.监听这个对象的属性

1
2
3
4
5
6
7
8
9
10
computed: {
    getName() {
        return this.watchData.name
    }
},
watch: {
    getName(newValue, oldValue) {
        console.log(newValue);
    }
},

这种方式其实和第二种是一样的,区别就是用到了computed,然后再监听方法getName,实际上方法getName返回的就是watchData对象中的name属性

到此这篇关于vue watch监听方法总结的文章就介绍到这了,更多相关vue watch监听方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://segmentfault.com/a/1190000041101712

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

最新评论