Skip to content

生命周期与 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 很容易组成一条追问链。

相关主题