九.Vue.js的侦听器

九.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>

好得多了,不是吗?

本文来源凌枫zero,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/8019

发表评论