Vue组件生命周期钩子按渲染流程严格触发：created在响应式初始化后、模板编译前；beforeMount在虚拟DOM生成后、挂载前；mounted在真实DOM挂载后；beforeUpdate/updated仅在响应式变更引发视图更新时执行，且父子组件遵循深度优先、自底向上顺序；组合式API中需显式导入如onMounted等钩子，setup运行于beforeCreate与created之间，无this上下文。
Vue 组件生命周期钩子不是按时间顺序机械执行的，而是嵌入在渲染流程内部、由响应式系统和虚拟 DOM 更新机制共同触发的回调节点。它们的调用时机严格绑定于组件状态变化与 DOM 同步的关键环节，而非独立的时间线。
钩子与渲染阶段强耦合
每个钩子都对应渲染流程中一个不可跳过的内部动作：
- created：发生在响应式系统初始化完成之后，此时 data、computed、watch 已就绪，但模板尚未编译，无法访问 $el 或任何 DOM；
- beforeMount：模板已编译为 render 函数，虚拟 DOM 第一次生成，但还没插入真实 DOM；
- mounted：真实 DOM 节点已挂载完毕，$el 可用，可安全操作 DOM 或启动第三方库（如 Chart.js）；
- beforeUpdate / updated：仅在响应式数据变更触发 re-render 时执行，前者在 patch 前，后者在 patch 完成后，二者之间是虚拟 DOM diff 和打补丁过程。
父子组件调用顺序受渲染树结构约束
挂载和更新阶段的钩子执行顺序遵循“深度优先 + 自底向上”原则：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 父组件 beforeCreate → created → beforeMount；
- 然后递归进入子组件，依次执行其 beforeCreate → created → beforeMount → mounted；
- 子组件 mounted 完成后，父组件才执行 mounted；
- 更新时同理：子组件先 beforeUpdate → updated，再触发父组件对应钩子。
组合式 API 中钩子需显式注册
Vue 3 的 setup() 是首个执行入口，但它本身不等于 created —— 它运行在 beforeCreate 和 created 之间，且没有 this 上下文：
立即学习“前端免费学习笔记（深入）”；
- 所有生命周期钩子（如 onMounted、onUpdated）必须从 vue 显式导入并调用；
- 它们内部通过 effect scope 关联当前组件实例，在对应渲染阶段被框架统一调度；
- setup 内部不能直接使用 this，响应式数据需用 ref / reactive 创建，副作用清理逻辑也应放在 onBeforeUnmount 中。
钩子本质是响应式更新链路上的拦截点
真正驱动钩子执行的是 Vue 的响应式更新机制：
- 数据变更触发 trigger → effect.run → 组件 render → 虚拟 DOM 对比 → DOM 更新；
- beforeUpdate 在 render 函数执行后、diff 开始前触发；
- updated 在 patch 完成、DOM 真实更新后触发；
- 如果数据变更未引起视图变化（比如修改未被模板使用的 ref），就不会触发 beforeUpdate / updated。
