九.Vue.js的侦听器

Java架构师必看

发布于 2021-05-14 11:25:28

5370

发布于 2021-05-14 11:25:28

九.Vue.js的侦听器

强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码

一.Vue初体验：https://blog.csdn.net/qq_43674132/article/details/104857216 二.Vue条件命令：https://blog.csdn.net/qq_43674132/article/details/104857322 三.Vue循环指令：https://blog.csdn.net/qq_43674132/article/details/104857517 四.Vue处理用户输入：https://blog.csdn.net/qq_43674132/article/details/104857651 五.Vue组件初体验：https://blog.csdn.net/qq_43674132/article/details/104857870 六.Vue实例：https://blog.csdn.net/qq_43674132/article/details/104857953 七.Vue模板语法：https://blog.csdn.net/qq_43674132/article/details/104858009 八.Vue计算属性：https://blog.csdn.net/qq_43674132/article/details/104858068 九.Vue.js侦听器：https://blog.csdn.net/qq_43674132/article/details/104860083 十.Vue.js的class绑定：https://blog.csdn.net/qq_43674132/article/details/104861826 十一.Vue style绑定：https://blog.csdn.net/qq_43674132/article/details/104877107 十二.Vue 条件渲染：https://blog.csdn.net/qq_43674132/article/details/104877177 十三.Vue 列表渲染：https://blog.csdn.net/qq_43674132/article/details/104877393 十四.Vue事件处理：https://blog.csdn.net/qq_43674132/article/details/104878173 十五.Vue表单输入绑定：https://blog.csdn.net/qq_43674132/article/details/104879776 十六.Vue中引用图片：https://blog.csdn.net/qq_43674132/article/details/107043105

Vue.js的侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

计算属性VS侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：

 <div>{
  {fullName}}</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            firstName:'zhang',
            lastName:'san',
            fullName:'zhang san'
        },
        //需要做异步操作可以用watch监听器
        watch:{
            //监听firstName的变化，如果firstName变了，要重新给fullName赋值
            //val：firstName方法里面有个val，这个参数就是变了之后最新的值
            firstName(val){
                this.fullName=val+''+this.lastName;
            },
            lastName(val){
                this.fullName=''+this.firstName+val;
            }
        }
        });
</script>

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

<script>
    var app = new Vue({
        el:"#app",
        data:{
            firstName:'zhang',
            lastName:'san'
        },
        computed: {
            fullName(){
                return this.firstName+''+this.lastName;
            }
        }
        });
</script>

好得多了，不是吗？

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全