Vue3的watch函数中，第三个参数配置对象详细分析

在Vue 3的watch函数中，第三个参数是一个配置对象，用于定义如何执行watch函数。下面是几个常用的配置项的讲解，并附上代码示例：

`1、immediate`

immediate：当设置为true时，会在初始渲染时立即执行watch函数。默认为false。

// 示例代码
watch('count',(newCount, oldCount) => {console.log(`new count: ${newCount}, old count: ${oldCount}`)},{immediate: true}
)

2、`deep`

deep：当设置为true时，会深度遍历监听对象的所有属性。默认为false。

// 示例代码
const state = reactive({obj: { a: 1, b: 2 },arr: [1, 2, 3]
})
watch(() => state.obj,(newObj, oldObj) => {console.log(`new obj: ${JSON.stringify(newObj)}, old obj: ${JSON.stringify(oldObj)}`)},{deep: true}
)

`3、flush`

在Vue3中，watch函数的第三个参数是可选的配置项，其中一个配置项是flush，它控制何时运行watch的回调函数。flush有三个选项："pre"、"post"和"sync"。

`3.1、pre`

在侦听器的回调函数运行之前立即运行更新函数，即在dom渲染完毕前调用回调函数（此时获取不到DOM！）。这是默认值。

watch(() => count.value,() => {console.log("watcher callback");},{ flush: "pre" }
);

`3.2、post`

在侦听器的回调函数运行之后立即运行更新函数，即在下一次DOM更新之后执行。

watch(() => count.value,() => {console.log("watcher callback");},{ flush: "post" }
);

`3.3、sync`

在更改被触发时立即运行侦听器的回调函数和更新函数，这是非常明确和强制的选项。

watch(() => count.value,() => {console.log("watcher callback");},{ flush: "sync" }
);

在大多数情况下，不需要指定flush选项，因为默认的行为通常足够了。但是，对于一些需要更精确控制的场景，flush可以是一个非常有用的配置项。

`4、onTrack`和`onTrigger`

用于跟踪和调试响应式对象属性的访问和修改。onTrack和onTrigger可以帮助我们更好地理解和追踪响应式数据的读取和修改操作，更好地进行调试和开发。

`4.1、onTrack`

onTrack选项会在我们读取响应式数据时被触发，我们可以在该函数中做一些记录或者打印日志的操作。例如：

const state = reactive({count: 0,
})watch(() => state.count,(count, prevCount) => {console.log(`count changed from ${prevCount} to ${count}`)},{onTrack: (event) => {console.log(`The ${event.key} key is being read`)},}
)

在这个例子中，我们在watch函数的第三个参数中配置了onTrack选项，然后在控制台输出了响应式数据读取的相关信息。

`4.2、onTrigger`

onTrigger选项会在响应式数据被修改时被触发，我们可以在该函数中做一些特殊的处理。例如：

const state = reactive({count: 0,
})watch(() => state.count,(count, prevCount) => {console.log(`count changed from ${prevCount} to ${count}`)},{onTrigger: (event) => {console.log(`The ${event.key} key is being set to ${event.value}`)},}
)

在这个例子中，我们在watch函数的第三个参数中配置了onTrigger选项，然后在控制台输出了响应式数据修改的相关信息。