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 和打补丁过程。

父子组件调用顺序受渲染树结构约束

挂载和更新阶段的钩子执行顺序遵循“深度优先 + 自底向上”原则：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• 父组件 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！