Vue的计算属性缓存和method的区别在哪？

一.先看一个例子

1 <div id="example">
2     {{ message.split('').reverse().join('')  }}
3 </div>

当我们看到这个例子不再是简单的声明式逻辑 不再像 {{ 1 + 1 }}那么的容易理解,你可以需要看一段时间之后才意识道,"哦 原来这是个将字符串反转的例子！"

当我们频繁使用这种复杂的逻辑时,我们就需要使用Vue提供的计算属性了,对于任何复杂的逻辑你都应当使用“计算属性”

 

// 例子：

<div id="example">
    <p>Orignal message: "{{ message }}"</p>
    <p>conputed  reversed message:"{{ reversedMessage}}"</p>
</div>

var vm = new Vue({
     el:"#example",
     data:{
         message:"Hello"
    },
   
    // 使用计算属性:computed
     computed:{
         reversedMessage:function() {
              return this.message.split('').reverse().join('')
        }
     }


})

打印上面的例子结果如下:

Orignal message:"Hello"

conputed  reversed message:"olleH"

看到上面的例子,我们用方法也可以同样实现这个例子,这里就不上代码了！

重点说一下这两者的区别,以前我对这个也是很懵,今天通过vue的官方文档弄清楚了区别:

计算属性是基于它们的依赖进行缓存的，也就是说当你下次在执行这个操作,是不需要再次执行函数的,因为缓存了嘛！~前提是你没有改 message的值

方法则会每次执行都会调用函数,现在再来看看Vue文档如何进行解释的。以这段话结束这篇博客

我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

 

转载于:https://www.cnblogs.com/qjuly/p/8505201.html