搞懂vue的计算属性

Posted 2021-03-14 449house

计算属性的关键词: 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值更改 计算属性的值也更改

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

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

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

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

待补充