Vue3-17 监听器(Watch)

在 Vue3 的开发过程中，监听器（Watchers）是实现数据动态监听和响应的重要工具。通过灵活运用监听器，我们可以在数据变化时执行各种自定义的逻辑。接下来，让我们结合一段示例代码，深入了解 Vue3 监听器的强大功能。

公众号：资小库，回复vue下载本文源码

一、基本监听

在上述代码中，我们使用 watch 监听了 message 这个 ref 对象。当 message 的值发生变化时，回调函数会被触发。在这里，如果新的值是 '123456'，我们就对 message 的值进行了重新设置。

二、函数监听

三、对响应式对象属性的监听

对于响应式对象 a，我们不能直接监听其属性。但是，可以通过函数来监听属性的变化。此外，还可以使用 { deep: true } 选项进行深层监听，当对象内部的属性发生变化时也能触发回调。

四. 高级用法示例

watchEffect 和 watchSyncEffect

watchEffect 和 watchSyncEffect 是Vue 3提供的高级监听器，它们在处理异步操作时特别有用。

异步监听器 watchEffect

在这个例子中，watchEffect 会自动追踪函数中使用的响应式数据（data），并在数据变化时重新运行函数。这样做不仅使得异步数据的获取和处理更加简洁，而且避免了手动管理依赖关系的复杂性。

同步监听器 watchSyncEffect

与 watchEffect 不同，watchSyncEffect 会在Vue执行更新之前同步执行其回调函数。这对于需要立即反应并更新DOM之前执行一些操作的情况非常有用。

watchPostEffect

回调的时机：

当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。

类似于组件更新，用户创建的侦听器回调函数也会被批量处理以避免重复调用。例如，如果我们同步将一千个项目推入被侦听的数组中，我们可能不希望侦听器触发一千次。

默认情况下，侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。

//flush: 'post'用于访问回调之后的dom，也可以在watch中式hi有
watchEffect(async ()=>{
    const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${b.value}`
  )
  b.value = await response.json()
},{
  flush: 'post'
})
//和上面作用是一样的，vue给起了个别名
// watchPostEffect(async ()=>{
//     const response = await fetch(
//     `https://jsonplaceholder.typicode.com/todos/${b.value}`
//   )
//   b.value = await response.json()
// }
//同步监听器 你还可以创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发：
watchEffect(async ()=>{
    const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${b.value}`
  )
  b.value = await response.json()
},{
  flush: 'sync'
})

可直接运行的代码，体验监听器带来的效果！

      关注公众号：资小库，问题快速答疑解惑