Vue计算属性 computed

Vue中的计算属性，主要将一下复杂的表达式，整合成一个属性，更加方便使用、通俗易懂

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

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

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。

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

如果使用计算属性来体现 message 的反转字符串

<div id="example">
  {{ messageReverse }}
</div>

computed: {
  messageReverse() {
    return this.message.split("").reverse().join("");
  },
}

不仅代码更简洁，而且计算属性的语义化，也使我们可以更加容易了解代码的意义

getter和setter方法

getter

计算属性默认有一个getter方法

computed: {
  messageReverse: {
    get() {
       return this.message.split("").reverse().join("");
    }
  },
}

一般情况下，get方法会省略不写，get方法通常是与set方法一起出现

get方法的作用是将计算属性的计算结果抛出，使使用计算属性时获得计算结果

setter

setter方法的回调函数中有一个形参 newValue ，返回到是计算属性的计算结果

computed: {
  str: {
    get() {
       return "Hello" + "World"
    },
    set(newValue) {
      console.log(newValue); // "HelloWorld"
    }
  },
}

这样我们就可以及时对计算结果进行后序处理