Appearance
生命周期与 nextTick:渲染阶段、DOM 可见性与副作用时机
主题边界
- 生命周期钩子描述的是组件实例在创建、挂载、更新、卸载过程中的关键时点。
nextTick的意义在于跨过当前这一轮更新刷新边界,拿到更新后的 DOM 状态。
机制与流程
- 创建阶段完成 props、slots、setup 和 render effect 初始化,挂载阶段执行首次 patch 并生成真实 DOM。
- 更新阶段由响应式依赖变化触发,组件渲染 effect 进入 scheduler,刷新完成后才会进入
updated一类时点。 nextTick会等待当前 flushJobs 完成后再执行回调,因此常用于 DOM 测量、滚动、聚焦等依赖真实渲染结果的逻辑。
关键差异
mounted说明组件 DOM 已完成首次挂载,不代表所有异步子组件和外部资源都准备就绪。updated发生在组件本轮更新完成后,但父子组件和 watcher 的相对时序仍受 flush 策略影响。
边界条件
nextTick解决的是当前更新轮次后的 DOM 可见性,不是任意异步任务的统一等待器。- 把所有 DOM 操作都塞进
nextTick会掩盖真正的状态设计问题。
工程落点
- 列表滚动定位、表单自动聚焦、虚拟列表测量和第三方 DOM 插件接入,都经常依赖生命周期和 nextTick 协同。
- 这道题和 scheduler、watch flush、KeepAlive、Teleport 很容易组成一条追问链。