Vue之计算属性实战

7、计算属性

例1：差值模板中使用js表达式

data: {
    message: '上海自来水来自海上 haha'
}

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

 
<p>原始值: "{{ message }}"</p>
​
<!-- 1、插值数据绑定中使用表达式 -->
<p>反转消息: {{ message.split('').reverse().join('') }}</p>

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

computed: {
    reversedMessage () {
        return this.message.split('').reverse().join('')
    }
}
 
<!-- 2、使用计算属性 -->
<p>反转消息: "{{ reversedMessage }}"</p>

例3：使用方法

methods:{
    reversed () {
        return this.message.split('').reverse().join('')
    }
}
 
<!-- 3、使用方法 -->
<p>反转消息: "{{ reversed() }}"</p>

看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？
计算属性缓存 vs 方法
计算属性基于缓存：在相关依赖发生改变时它们才会重新求值。
方法将总会再次执行
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 计算！如果你不希望有缓存，请用方法来替代。

<!-- 2、使用计算属性 -->
<p>反转消息: "{{ reversedMessage }}"</p>
<!-- 调用两次只执行一次属性的计算 -->
<p>反转消息: "{{ reversedMessage }}"</p>
​
<!-- 3、使用方法 -->
<p>反转消息: "{{ reversed() }}"</p>
<!-- 调用两次执行了两次属性的计算 -->
<p>反转消息: "{{ reversed() }}"</p>