一.先看一个例子
12 {{ message.split('').reverse().join('') }} 3
当我们看到这个例子不再是简单的声明式逻辑 不再像 {{ 1 + 1 }}那么的容易理解,你可以需要看一段时间之后才意识道,"哦 原来这是个将字符串反转的例子！"
当我们频繁使用这种复杂的逻辑时,我们就需要使用Vue提供的计算属性了,对于任何复杂的逻辑你都应当使用“计算属性”
// 例子：
var vm = new Vue({el:"#example",data:{message:"Hello"},// 使用计算属性:computed computed:{reversedMessage:function() {return this.message.split('').reverse().join('')}}})Orignal message: "{{ message }}"
conputed reversed message:"{{ reversedMessage}}"
打印上面的例子结果如下:
Orignal message:"Hello"
conputed reversed message:"olleH"
看到上面的例子,我们用方法也可以同样实现这个例子,这里就不上代码了！
重点说一下这两者的区别,以前我对这个也是很懵,今天通过vue的官方文档弄清楚了区别:
计算属性是基于它们的依赖进行缓存的，也就是说当你下次在执行这个操作,是不需要再次执行函数的,因为缓存了嘛！~前提是你没有改 message的值
方法则会每次执行都会调用函数,现在再来看看Vue文档如何进行解释的。以这段话结束这篇博客
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
