开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情
计算属性
vue.js的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，在模板中放入太多的逻辑会让模板过重且难以维护。使用侦听属性，只能针对指定的数据，无法重用，所以，对于任何复杂逻辑，你都应当使用计算属性。
侦听属性
模板内的表达式非常便利，但是设计他们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。vue提供了一种更通用的方式来观察和响应vue实例上的数据变动：侦听属性
当你有一些数据需要随着其他数据变动而变动时。
下面来说三种侦听属性的特点，用法，和区别
- watch
侦听某一个data中值的变化，只要侦听的值发生改变，就会调用侦听函数，该函数中可以修改data中的其他值，但是不能复用，而且只能侦听一个值。
2. computed
可以监听多个值，只要函数中依赖的某个值发生改变，就会重新调用该计算属性，生成新的值，必须有返回值，不可以修改data中的数据，需要手动调用。
3. methods
它不依赖缓存，如果调用某一函数或其他的话，每次调用都要重新进行逻辑处理）
我们可以将同一个函数定义为一个方法而不是一个及计算属性。两种方式的最终结果确定是完全相同的。然后，不同的是计算属性是基于他们的依赖进行缓存的，只在相关依赖法还是能改变时他们才会重新求职。这就意味着只要data中的某一个属性还没发生改变，多次访问其计算属性会立即返回之前的计算结果，而不必再次执行函数。
区别：
wstch可以修改data中的其他值，但不能复用，而且只能侦听一个值。
computed可以监听多个值，必须有返回值，不可以修改data中的数据，需要手动调用，而且它基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
methods也可以监听多个值，可以修改data中的数据，它可以代替computed，效果上两个是一样的，只不过methods它不依赖缓存，每次在重新渲染的时候，函数都会重新调用执行。在这一方面来说，computed性能会更好，起到优化效果。但是如果你不希望缓存，可以使用methods属性。还有一点不同的是使用methods，在调用的时候要写方法的调用方式。
样式：方法名（）如下图:
关于缓存的问题
我们为什么需要缓存呢？假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并作大量的计算，然后我们可能有其他的计算属性依赖A，有缓存的话，在第一次得到运算结果就缓存起来，再次调用时，如果数据没有发生改变，那么直接在缓存中拿取，不需要再一次的去遍历计算，运算量逻辑量越大，这一方式优点越明显。
如果没有缓存，我们将不可避免的多次执行A的getter，如果不希望有缓存，还是可以用methods来代替。看具体的需求！
