计算属性和侦听属性有什么区别？

在 Vue.js 中，计算属性（computed properties）和侦听属性（watcher）是两种处理数据变化的方式，它们都允许开发者根据数据的变化来更新组件的状态。虽然它们的目标类似，但它们的工作方式和使用场景是有差异的。

计算属性（Computed Properties）

1. 定义：

   • 计算属性是惰性计算的，即只有在需要计算的结果时才会进行计算。
   • 它们是基于它们的依赖项自动地计算出来。

2. 特点：

   • 性能优化：计算属性只在它依赖的响应式属性变化时才会重新计算。
   • 封装逻辑：计算属性可以对一个或多个响应式属性进行计算，并将结果以新的属性形式暴露在外部。
   • 组合getter和setter：计算属性可以用getter来计算值，可以用setter来改变依赖的响应式属性。

3. 示例：

   computed: {
     capitalizedName() {
       // 这个计算属性会返回一个新字符串，以响应 `name` 的变化
       return this.name && this.name.charAt(0).toUpperCase() + this.name.slice(1);
     }
   }
   

侦听属性（Watchers）

1. 定义：

   • 一个侦听器可以响应多个数据属性的变化，而计算属性仅能响应它自己的响应式依赖项的变化。

2. 特点：

   • 更灵活的动作：侦听器是个指令，它允许你执行异步操作或需要更多复杂流程的操作。
   • 放入计算属性中的逻辑难以提取：如果你的计算属性内部有复杂逻辑，可能难以再次重用。
   • 性能开销：与计算属性相比，在每次的响应式属性变化时，侦听器都会触发，有时候可能会影响性能。

3. 示例：

   watch: {
     message(newValue, oldValue) {
       this.$emit('input', newValue);
     }
   }