为什么写这篇笔记？
记得在以往的面试中多次被问到这个问题，回答的都不理想，仔细想想也是理解的不到位。今天借着休息的时间准备查阅文档，写写示例代码去仔细理解下。
computed 计算属性是什么？
computed 计算属性介绍：
computed 计算属性是一个对象。它的使用方法是在 computed 属性中定义一个方法，和给对象定义方法一样，方法名可以直接在页面（template）中使用，不需要加 （），这是因为计算属性看起来是指向了方法（function），其实指向的是方法 return 的结果。
computed 计算属性的特性是计算结果会被缓存，如果 function 中依赖的响应式属性发生变化，computed 便会重新计算。注意如果依赖实例之外的属性（比如非响应式属性）则计算结果不会更新。
此外，如果在计算属性中使用了箭头函数，则 this 不会指向组件的实例，但在函数中依然可以将实例以函数的第一个参数访问。如下：
computed: {
aDouble: vm => vm.a * 2
}
此外，计算属性默认只有 getter ，但也可以使用 setter 。 具体操作示例请看 计算属性的 getter 和 setter
计算属性使用示例：
computed: {
newList: function() {
return this.brandList.filter(item => item.name.indexOf(this.keywords) !== -1);
}
}
什么时候使用计算属性？
模板内表达式多用于简单计算，这样便于阅读代码时的理解。如果在模板表达式里使用复杂的运算，一是难以理解，二是不能复用。你可能会说，那我在 methods 中定义一个方法， return 处理结果也可以啊。是的，可以。但不同之处在于，计算属性会缓存计算结果，只在依赖的响应式属性发生变化时，才会更新数据。这是计算属性的性能优势。 更多详情可访问
watch 侦听器是什么？
watch 侦听器介绍
watch 属性是一个对象，键（key)可以是 Vue 实例的表达式（字面量）和字符串（data 中定义的数据），值是回调函数，也可以是方法名、包含了方法的对象和方法集合的数组。
回调函数的参数包含了新值和旧值。同时，如果需要对对象的值做进一步侦听，需要将键（key）对应的值设为对象，在对象的身上定义回调函数，再设置 deep 属性为 true。同时如果设置 immediate: true，则回调会在侦听开始之前调用。
需要注意的是 watcher 函数不能是箭头函数，官网的解释是箭头函数绑定了父级作用域上下文，会使 this 不能按照期望指向 Vue 实例。
什么时候使用侦听器？
当需要在数据变化时做异步或者开销比较大的操作时，watch 比较有用。
详细介绍可以访问 Vue 官网查看 watch 属性介绍。
总结：computed 计算属性和 watch 侦听器的区别
相同点
都是在数据发生变化需要进行处理的时候使用。
不同点
- 使用方式上 计算属性是依据响应式属性得出的计算属性，使用时需要调用，且不加（），会缓存数据，在响应式属性更新时，计算属性也更新。 侦听器不需要调用，会在侦听属性发生变化时，自动调用。 注意，计算属性必须 return 一个结果，也就是处理后的计算属性的值。而侦听器则不需要。
- 使用场景上 计算属性多用于依据一个或多个响应式属性得到另一个计算属性。比如：姓+名=全名。比如购物车结算金额时。 侦听器多用于复杂场景或需要异步操作时，比如搜索时实时出现搜索建议或提示。搜索场景代码示例可访问 Vue 之 侦听器 。
