Vue3实战怎么在组件初始化时立即调用 Vue 的 watch 函数作者资深前端专家更新时间2023-10-271. 场景介绍在 Vue 的开发过程中我们经常需要在数据变化时执行特定的逻辑或者需要根据初始状态做一些处理。如果希望监听器在组件创建初始化的那一刻就执行一次而不是等到数据发生变化时才执行就需要用到watch选项中的immediate属性。2. 核心概念Vue 的watch函数提供了第三个参数options用于配置监听行为。其中最重要的一个属性就是immediate。immediate(布尔值)表示在组件初始化时是否立即执行一次回调函数。默认值为false。作用当设为true时watch 会在组件创建阶段DOM 渲染之前同步执行一次回调函数传入的初始值通常来源于source。3. 逻辑流程图下面通过流程图来展示带有immediate: true的 watch 监听器在组件初始化时的执行过程为false为true组件开始初始化解析 Watch 选项检查 immediate 参数暂不执行回调回调仅在数据变化时触发立即执行回调函数传入 source 的当前值监听数据变化source 发生变化再次执行回调函数4. 代码实战演示以下代码展示了如何使用watch的immediate属性在组件加载时获取初始值template div classcontainer h3当前计数: {{ count }}/h3 button clickcount增加计数/button /div /template script setup import { ref, watch } from vue const count ref(0) // 监听 count 变化 // immediate: true 表示在组件初始化时立即执行一次 watch(count, (newVal, oldVal) { console.log(监听触发!) console.log(当前值: ${newVal}, 旧值: ${oldVal}) }, { immediate: true }) console.log(组件初始化完成) /script4.1 控制台输出结果执行上述代码后控制台将首先打印 组件初始化完成然后立即打印监听触发的日志。这证明了immediate: true在组件加载阶段就立即执行了回调。4.2 参数说明在回调函数(newVal, oldVal)中newVal当前最新的值组件初始化时即为 source 的初始值。oldVal上一次的值初始化时通常为 undefined。5. 进阶场景与注意事项5.1 深度监听与 immediate 的组合当我们使用deep: true进行深度监听对象时确保对象本身在初始化时不是undefined或null否则回调可能无法正常捕获嵌套属性的变动。5.2 嵌套组件的初始化顺序在父组件和子组件都设置immediate: true的情况下子组件的 watch 回调往往会先于父组件执行。这是因为 Vue 的组件挂载顺序是先挂载子组件再挂载父组件。6. 总结掌握watch的immediate属性是编写响应式逻辑的关键。它能帮助我们处理组件初始化时的状态同步问题但在使用时要注意回调函数的执行时机以及参数的传递方式避免因异步操作或初始化状态导致的逻辑错误。