当前位置：首页 > article >正文

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

article 2024/9/20 15:27:26

在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选项，然后在控制台输出了响应式数据修改的相关信息。