计算属性（conmputed）和侦听器（watch）

计算属性（computed）

作用：

• 减少模板中的计算逻辑
• 进行数据缓存
• 依赖固定的数据类型（响应式数据）

使用：

• 在computed属性对象中定义计算属性的方法
• 在页面中使用{{方法名}}来显示计算的结果
• 通过getter/setter实现对属性数据的显示和监视

侦听器（wathc）

作用：

• 比computed更加灵活
• watch中可以执行任何逻辑，比如：函数节流、Ajax异步数据获取、甚至操作DOM
• 依赖固定的数据类型（响应式数据）

使用：

• 通过vm对象的$watch()或者watch配置来监视指定的属性
• 当属性变化时，回调函数自动调用，在函数内部进行计算

总结

• computed能做的，watch都能做，反之则不行(computed可以实现双向数据绑定，watch不可以)
• 能用computed的地方，尽可能使用computed
• computed是计算一个新的属性，并将改属性挂载到vm(Vue实例)上，而watch是监听已经存在且以挂载到vm上的数据，所以用watch同样可以监听computed计算属性的变化（其他还有data,props）
• computed本质是一个惰性求值观察者，具有缓存性，只有当依赖变化后，第一次访问computed属性，才会计算新的值，而watch则是当数据发生变化变回调用执行函数
• 从使用场景上说，computed适合一个数据被多个数据影响，而watch适用一个数据影响多个数据

示例：