本文共 828 字，大约阅读时间需要 2 分钟。

7、计算属性

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

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

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

原始值: "{
  { message }}"
​
   
反转消息: {
  { message.split('').reverse().join('') }}

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

例2：使用计算属性

computed: {    reversedMessage () {        return this.message.split('').reverse().join('')    }} 
   
反转消息: "{
  { reversedMessage }}"

例3：使用方法

methods:{    reversed () {        return this.message.split('').reverse().join('')    }} 
   
反转消息: "{
  { reversed() }}"

看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？

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

   
反转消息: "{
  { reversedMessage }}"
   
反转消息: "{
  { reversedMessage }}"
​
   
反转消息: "{
  { reversed() }}"
   
反转消息: "{
  { reversed() }}"

转载地址：http://iyzki.baihongyu.com/