一 computed和watch的区别#

vue 2 中有三种 watcher(渲染 watcher/计算属性 watcher/用户 watcher) vue 3 中有三种 effect（渲染 effect/计算属性 effect/用户 effect）

1.1 computed#

• 计算属性仅仅当用户取值时才会执行对应的方法
• computed 属性具备缓存的，依赖的值不发生变化，对其取值的计算属性方法不会重新执行
• 计算属性可以简化模板中复杂表达式
• 计算属性中不支持异步逻辑
• computed 属性是可以在模板中使用的

1.2 watch#

watch 则是监听值的变化当值发生变化时调用对应的回调函数，经常用于监控某个值的变化，进行一些操作（异步要注意竞态问题）

vue 3 中提供了 onCleanup 函数，让用户更加方便使用也解决了清理问题

1.3 区别#

1.3.1 功能和特性#

• computed：是一个计算属性，它基于其依赖的响应式数据进行计算，并将结果缓存起来，只有当其依赖的数据发生变化时，它才会重新计算值，这种缓存机制可以避免不必要的计算，提高性能
• watch：是一个数据监听器，用于监听某个数据的变化，当监听的数据发生变化时，它会执行指定的回调函数，它不具备缓存功能，每次数据变化都会触发回调函数

1.3.2 缓存机制#

• computed：具有缓存特性，如果依赖的数据没有发生变化，computed 函数会直接返回缓存的结果，而不是重新计算，这样可以节省重复的计算，提升代码的性能
• watch：不具备缓存机制，每次监听的数据发生变化时，它都会执行回调函数，进行后续的操作

1.3.3 异步操作#

• computed：不支持异步操作，如果计算属性内部有异步操作，Vue 将无法正确追踪到数据的变化
• wach：支持异步操作，你可以在 watch 的回调函数中执行异步操作，例如网络请求

1.3.4 使用场景#

• computed：适用于将复杂的计算逻辑从模板中分离出来，使模板更加简洁和易读。同时，由于它支持缓存，所以在处理大量计算或复杂计算时，可以提高性能。此外，当需要对已有的数据进行处理、转换、格式化时，也可以使用computed属性
• watch：用于监听某个数据的变化，并在数据变化时执行一些其他的操作，例如更新DOM、发送网络请求等。它更多的是起到监听的作用，用于响应数据变化并执行相应的操作

如果你需要根据某些数据的变化来计算结果，并且希望结果能够缓存以提高性能，那么可以选择使用computed。如果你需要监听某个 数据的变化，并在数据变化时执行一些操作，那么可以选择使用watch