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

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

1、immediate

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

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

2、deep

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

javascript 复制代码
// 示例代码
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!)。这是默认值。

javascript 复制代码
watch(
  () => count.value,
  () => {
    console.log("watcher callback");
  },
  { flush: "pre" }
);
3.2、post

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

javascript 复制代码
watch(
  () => count.value,
  () => {
    console.log("watcher callback");
  },
  { flush: "post" }
);
3.3、sync

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

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

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

4、onTrackonTrigger

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

4.1、onTrack

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

javascript 复制代码
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选项会在响应式数据被修改时被触发,我们可以在该函数中做一些特殊的处理。例如:

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

5、总结

这些是`watch`函数的第三个参数的一些常见配置选项。您可以根据需要选择适当的配置来满足您的需求。

相关推荐
2501_915918413 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java5 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)5 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术6 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫6 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css