watch,watchEffect 和 computed 的区别
vue中的watch, watchEffect,computed是三个不同的工具，用于处理数据响应式和根据数据的改变而执行对应的逻辑。
computed
作用
计算属性。computed 用于定义那些基于组件状态（如 data、其他 computed 属性、props 等）的衍生值。当其依赖的状态发生变化时，计算属性会自动重新计算并返回结果。
特性
- 缓存机制：
computed是有缓存的，只有依赖的状态发生变化时，才会重新计算。如果依赖未发生变化，则直接返回之前计算的结果，避免了不必要的重复计算，提高了性能 - 声明式： 在模板中可直接使用
computed属性，就像访问普通函数一样 - 读取优先：
computed主要用于读取场景，其值由vue自动维护, 通常不建议在业务逻辑中直接修改computed属性, 因为这会破坏依赖追踪机制，导致计算属性的依赖项变化无法触发重新计算。computed默认是可读的状态；
使用场景
- 当需要对数据进行复杂计算或者逻辑出库，并且结果仅仅依赖于输入状态时
- 需要以高效，声明式的方式展示经过处理的数据(格式化，筛选，汇总)
watch
作用
响应式监听器， 允许指定单个或者多个数据源(可以是任意数据, 数据属性，对象，数组甚至是props, computed)， 当这数据源的值发生变化并执行回调函数
特性
- 准确监听： 可以精确监听指定的数据源的深度，控制监听粒度
- 选项丰富： 提供了多种选项去定制监听行为，如
deep深度监听，immediate立即执行,flush队列刷新策略等 - 手动控制： 回调函数内可以进行复杂的异步操作、资源清理等工作，并能访问到新旧值。
使用场景
- 当需要在特定数据变化时执行异步操作、昂贵计算或者进行副作用处理（如更新 DOM、发送网络请求、更新外部状态等）。
- 需要对数据变化进行精细控制，如深度监听、处理特定类型的变更事件等。
watchEffect
作用
自动追踪副作用函数；watchEffect立即执行传入的回调函数，并在此之后持续追踪其内部依赖（所有响应式引用），每当这些依赖变化时，回调函数会再次执行。
特性
- 自动搜集依赖： 不需要明确指定要监听的数据源，函数体内部访问到的所有响应式数据都会被自动追踪
- 立即执行： 创建时立即运行一次，无需 immediate 选项，默认总是同步执行回调。
- 关注副作用： 更关注于副作用（side effect）的执行，而非具体监听哪个数据的变化。
使用场景
- 当需要自动追踪和即时响应所有影响组件状态变化的因素时，无需关心具体是哪些数据变化。
- 用于处理初始化逻辑或依赖复杂且动态变化的情况，简化代码编写。
总结
computed适用于定义基于状态的衍生值，提供高效的缓存机制，常用于视图渲染。watch用于监听特定数据的变化，并在变化时执行特定的回调，适合处理复杂副作用。watchEffect自动追踪副作用函数的依赖，无须指定监听目标，常用于初始化和简单即时响应场景。