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>