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 属性）