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方法
computed: { messageReverse: { get() { return this.message.split("").reverse().join(""); } }, }
一般情况下，get方法会省略不写，get方法通常是与set方法一起出现
get方法的作用是将计算属性的计算结果抛出，使使用计算属性时获得计算结果
setter方法的回调函数中有一个形参 newValue ，返回到是计算属性的计算结果
computed: { str: { get() { return "Hello" + "World" }, set(newValue) { console.log(newValue); // "HelloWorld" } }, }
这样我们就可以及时对计算结果进行后序处理
原文：https://www.cnblogs.com/Function-cnblogs/p/14683585.html