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

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

计算属性（Computed Properties）

1. 定义：

2. 计算属性是惰性计算的，即只有在需要计算的结果时才会进行计算。

3. 它们是基于它们的依赖项自动地计算出来。

4. 特点：

5. 性能优化：计算属性只在它依赖的响应式属性变化时才会重新计算。

6. 封装逻辑：计算属性可以对一个或多个响应式属性进行计算，并将结果以新的属性形式暴露在外部。

7. 组合getter和setter ：计算属性可以用getter来计算值，可以用setter来改变依赖的响应式属性。

8. 示例：

   computed: {

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

   }

侦听属性（Watchers）

1. 定义：

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

3. 特点：

4. 更灵活的动作：侦听器是个指令，它允许你执行异步操作或需要更多复杂流程的操作。

5. 放入计算属性中的逻辑难以提取：如果你的计算属性内部有复杂逻辑，可能难以再次重用。

6. 性能开销：与计算属性相比，在每次的响应式属性变化时，侦听器都会触发，有时候可能会影响性能。

7. 示例：

   watch: {

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

   }

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/140161934