watch && watchEffectwatch && watchEffect watch watch的几个配置属性

watch && watchEffect

watch的几个配置属性

 watch(value,(newvalue,oldValue)=>{
 
 }, {
immediate:true,
deep:true,
once:true
})

(immediate:true)watch 默认是懒执行的,仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据
(deep:true)watch默认是不开启深度监听的，Vue 3.5+ 中，deep 选项还可以是一个数字，表示最大遍历深度——即 Vue 应该遍历对象嵌套属性的级数。当数据量比较到大时还请谨慎使用。
(once:true) 只触发一次

watch和watchEffect都能响应式地执行有副作用的回调。他们之间的主要区别是追踪响应式依赖的方式

watch执着中明确监听的数据源。它不会追踪任何在回调中访问的东西。另外，仅在数据源确实发生改变时才会触发回调。watch会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调的触发时机。
watchEffect则会在发生副作用期间追踪依赖。他不会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且让代码往往更整洁，但有时其响应式依赖关系会不那么明确。

watch 是一种更“手动”的工具，它需要你明确指定要监听的数据源，比如某个特定的响应式变量或计算属性。只有当这个数据源发生变化时，它才会触发你定义的回调函数。举个例子来说，如果你用 watch 监听一个 ref 的值，它不会去管回调函数里还访问了什么其它的响应式数据，只关心你告诉它要盯紧的那个目标。这样做的好处是你能很精确地控制什么时候触发回调，避免不必要的执行。
watchEffect 则更“自动”一些。它不需要你明确指定监听什么，而是会在执行回调时，自动追踪里面访问到的所有响应式数据。只要这些数据有任何变化，它就会重新运行回调。想象一下，你写了个函数，里面用到了几个响应式变量，watchEffect 就会默默地把这些变量都记下来，哪个变了它就跑一遍。这种方式写起来更简单直接，适合那些依赖关系比较动态的场景，但缺点是依赖不那么直观，你可能得小心点，确保回调里访问的东西真是你想要追踪的。

简单来说：

用 watch 当你想精确控制“听谁的”和“什么时候动”。

用 watchEffect 当你懒得列出依赖，只想让它自己搞定一切。