发射

vue的计算属性

计算属性的关键词: computed

computed也是进行数据的存储

那它和data普通属性有什么区别?

计算属性是以函数的方式进行返回 更灵活,数据可以包含逻辑处理操作,可以对计算属性中的数据进行监视。

举个栗子

反转字符串

<h2>{{msg.split(' ').reverse().join(' ')}}</h2>
直接在模板内这样写很不方便阅读

所以,对于任何复杂逻辑,你都应当使用计算属性

计算属性

data:{    
         //普通的属性
        msg:'我 是 灰太狼',
        num1:5
     },
computed:{
           resemsg:function(){
             //可以包含逻辑处理操作,同时reverseMsg依赖于msg
      return this.msg.split(' ').reverse().join(' ');
             }
     }
<h2>{{resemsg}}</h2>
方便阅读   
同时对data数据进行监视,msg值更改 计算属性的值也更改

计算属性的setter

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

    data:{
        firstName:'王',
        lastName:'李'
    }
    computed:{
        fullName:{
            get:function(){    //该函数必须有返回值,用来获取属性,称为get函数
                return this.firstName + ',' + this.lastName;
            },
            set:function(newValue){    //修改fullName的值也能,同步修改到firstName和lastName。
                var names = newValue.split(' ');
                this.firstName =names[0];
                this.lastName = names[names.length - 1];
            }
        }
    }
setTimeout(()=>{    //设定两秒后给fullName重新赋值
    vm.fullName = '王八 栗子';
},2000);
            <!-- 计算属性 get和set -->
            {{firstName}}<br>
            {{lastName}}<br>
            {{fullName}}

 

 

好的 接下来计算属性VS方法

那你就会说了,可以使用 methods 来替代 computed,效果上两个都是一样的。

但是区别在于,用computed也就是计算属性是基于它的依赖进行更新的,只有在相关依赖发生改变时才能更新变化。计算属性是缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行

而使用 methods ,在重新渲染的时候,函数总会重新调用执行。(使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性)

posted @ 2020-01-22 19:35  把番茄沉入海底  阅读(...)  评论(...编辑  收藏