在模板内使用 表达式非常便利，但是这个目的是进行简单的运算。如果在模板中进行复杂的逻辑会让模板过重，且难以维护。
对于任何复杂的逻辑，应当使用 计算属性。
#基础例子
通过上面的例子，可以看出：
1、计算属性是 是定义在 computed 属性中的。类似于：
2、通过Vue的API文档，我看看computed的 解释：
computed
类型： { [<strong>key</strong>: string]: Function | { get: Function, set: Function } }
解释：(1)、computed的类型，首先是个 object —> ‘{}’，
（2）、在computed中，可以 key 为 String 类型的 function 函数，或者定义一个包含 get 函数 及 set 函数 的 object 类。
（3）、这个 key，是可以看做是函数名，同样也是属性名。
例子：
3、计算属性的使用，接上面的例子。
//调用 计算属性，跟正常调用属性的方式相同//不要被计算属性 的方法搞蒙，搞成方法调用了。vm.aPlus // => 2
//计算属性 赋值，跟正常的属性赋值的方式相同，//不要被 计算属性的 方法搞蒙，考虑成方法调用了。vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
#计算属性的缓存特点及计算属性与方法的区别
1、计算属性与方法的区别
上例中：
1、在 p元素的 {{}} 中，我们使用 reversedMessage() ,这是一个方法调用。
2、这种方式跟 计算属性的调用 reversedMessage ，区别是什么呢？ 一看就是，Vue将 计算属性 reversedMessage 作为属性 对待，直接使用属性的方式调用。
问题是，两者都能实现相同的作用，那两者的区别是什么？
（1）、 计算属性是基于它们的响应式依赖进行缓存的，只在相关的响应式依赖发生改变时它们才会重新求职。这就意味着，只要message还没发生改变，多次访问reversedMessage 计算属性会立即返回之前的计算结果，而不必在执行函数。
（2）、相比，reversedMessage() 方法（函数），是该函数每次触发（比如重新页面刷新加载、其他位置调用），该方法将总会再次执行函数。
相比，计算属性的优势在于 缓存，当有响应式依赖，并需要大量复杂计算的时候，一次计算的 结果需要多次使用时，应当使用 计算属性来完成复杂的函数运算，这样在 多次使用的时候，就能避免 计算资源的浪费。
但是，如果不是有响应式依赖，或者不需要缓存的时候，同样可以使用方法来实现 运算需要。
这里还要在回答一个问题：什么是响应式依赖？
简单理解（错误之处，还请各位笔友在评论区指点），就是加入到Vue实例里 data 选项中的 property （说是属性也很尴尬，data中是类似与key：value 的键值对）。
又或者是依赖于其他 计算属性，而被依赖的计算属性，最终 也应该依赖于 data选中的property（具有响应式），否则就不是。
例如：
在一次加载计算后，now的值将 恒定（因为一次计算后，结果将会缓存，而不再触发函数运算），如果在想修改 now的值，就必须修改 now 依赖的 Date.now() 的值，但是，Date.now() 不是响应式依赖，原因是 它 没有到 Vue实例 data 选项中。
这里最明显就是，定义成函数：
在每次调用函数的时候，这个总能获取当前时间。
Original: https://www.cnblogs.com/bdxily/p/14389696.html
Author: 疯人院code
Title: Vue 计算属性 和侦听器
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/685155/
转载文章受原作者版权保护。转载请注明原作者出处！