文章目录
- [Computed Properties（计算属性）](#Computed Properties（计算属性）)
- Watchers（侦听器）
- 适用场景举例
Vue.js中的computed和watch是两种处理响应式数据的不同方式，它们分别服务于不同的目的：
Computed Properties（计算属性）
用途：
计算属性是用来根据其他响应式依赖（如data、props等）动态计算出一个新的值的属性。
当其依赖的任何响应式数据发生变化时，Vue会自动重新计算该属性的值，并更新相关联的DOM。
特点：
Computed属性的结果会被缓存 ，只有当它的依赖关系改变时才会重新计算。
可以定义getter函数（默认）获取计算结果，并在必要时定义setter函数修改相关依赖。
它们最适合用来封装一些复杂的逻辑，这些逻辑产生的值依赖于其他多个数据源。
缓存
Computed属性支持缓存机制。当计算属性所依赖的数据没有发生变化时，它会复用上次计算的结果，不会重新执行计算函数。
当任何一个影响到计算属性结果的响应式依赖项发生变化时，Vue会自动触发重新计算，并更新缓存。
异步
Computed属性不支持异步操作。如果在计算属性的getter函数中执行异步操作，Vue无法跟踪其依赖关系，也就无法正确地更新视图。
若要在数据变化后执行异步任务，通常不推荐在computed中实现。
Watchers（侦听器）
用途：
watch是更显式的观察者，用于监听特定数据的变化并执行相应的回调函数。
你可以指定要观察的数据路径，以及在数据变化前后执行哪些操作。
特点：
watch可以深度观察对象内部的变化（通过deep: true选项）。
监听函数不仅可以监听单个数据属性，还可以监听复杂表达式或者整个对象。
通常用于执行副作用操作，例如：在数据变化后发送API请求、更新DOM以外的地方、或者是手动触发某些业务逻辑。
缓存
Watch不具备缓存机制。每当监听的属性发生变化时，无论变化前后值是否一样，都会立即执行监听函数。
异步
Watch支持异步函数。在watch的回调函数中，可以直接执行异步操作，例如使用async/await或者.then()链式调用API等。
如果需要在数据变化后执行异步任务，并且任务完成后还需要进一步更新数据或视图，watch是合适的选择。
适用场景举例
Computed：
适用于基于已有响应式属性简单计算得出新值的场景，如计算全名、过滤数组等。
Watch：
适用于需要在数据变化后进行复杂处理，如触发异步API请求、进行额外的DOM操作或业务逻辑处理等。