Vue中的computed属性称为计算属性。模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
例如：
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
你可以使用computed属性这么写：
结果：
Original message: "Hello"
Computed reversed message: "olleH"
问：为什么reversedMessage不可以在data里面定义？
答：定义会报错，因为computed作为计算属性定义reversedMessage返回对应的结果给这个变量（通俗的理解，reversedMessage只是监控变量，对message进行处理，实际上重新返回了message），变量不可以被重复定义和赋值。
计算属性只在第一次调用时执行运算过程，计算结果会被缓存在内存中，多次调用时，如果依赖的数据未发生变化，不会再去进行运算过程的执行。
画重点：computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值。我理解为，computed只能监控放在data等对象下的实例数据。
看下面的例子：
<button @click="getMethodsDate">methods</button>
<button @click="getComputedDate">computed</button>
computed: {
computedDate() {
return new Date();
}
},
getMethodsDate() {
alert(new Date());
},
// 返回computed选项中设置的计算属性——computedDate
getComputedDate() {
alert(this.computedDate);
},
多次点击computed按钮，返回的时间是相同的！每次点击methods按钮返回的时间是不同的。
原因正是computed依赖于data中的数据，new Date()不是依赖型数据（不是放在data等对象下的实例数据），所以computed只提供了缓存的值，而没有重新计算。
只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。
总结：
支持缓存，只有依赖数据发生改变，才会重新进行计算；
不支持异步，当computed内有异步操作时无效，无法监听数据的变化；
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
