Vue渲染生命周期分创建、挂载、更新、卸载四阶段，各阶段职责明确：创建阶段初始化数据，挂载阶段操作DOM，更新阶段响应数据变化，卸载阶段清理副作用；递归组件按深度优先执行；组合式API需显式导入并注册生命周期钩子。
Vue 组件渲染生命周期不是一条平直的时间线，而是一套按阶段分层、受数据驱动、与 DOM 渲染深度耦合的执行机制。它既决定组件“何时能用数据”，也约束“何时能碰 DOM”，更影响“更新时会不会卡顿”。真正理解它，关键不在死记钩子顺序，而在看清三个维度：执行时机与上下文限制、父子/递归组件间的调用关系、以及响应式系统如何在其中穿针引线。
渲染生命周期的四个核心阶段怎么走？
每个阶段对应明确的职责边界和访问能力：
- 创建阶段（beforeCreate → created）：实例刚诞生，data、methods、computed 已就位，但 $el 还不存在；适合初始化非 DOM 相关逻辑，比如请求列表数据、设置本地缓存状态。
- 挂载阶段（beforeMount → mounted）：虚拟 DOM 已生成，真实 DOM 尚未插入；mounted 才是首个能安全操作真实节点的时机——此时 this.$el 可取，第三方库（如 Chart.js、Map SDK）可初始化。
- 更新阶段（beforeUpdate → updated）：仅当响应式数据变化触发重渲染时才执行；beforeUpdate 可读旧 DOM，updated 可读新 DOM；但避免在 updated 中改数据，否则会陷入循环更新。
- 卸载阶段（beforeUnmount → unmounted）：组件即将消失前的最后窗口；必须在此清理定时器、eventBus 订阅、addEventListener 等副作用，否则引发内存泄漏。
递归组件里生命周期怎么嵌套执行？
树形结构（如菜单、评论嵌套、文件目录）会让生命周期变成“深度优先栈式调用”，而非简单父子顺序：
- 父组件走到 created 后，立刻进入第一个子组件的 beforeCreate，再进其子……直到叶子节点；叶子节点 mounted 完，才逐层回退触发上层 mounted。
- 这意味着顶层 mounted 时，深层子节点 DOM 可能还没插入——若需确保整棵树 DOM 就绪，得用 nextTick 套多层，或由叶子节点 emit 事件通知根节点。
- 一个 prop 改动可能触发整棵子树的 beforeUpdate → updated 链式调用；若每层都含 watch 或 computed，性能开销随层级指数增长。
组合式 API 下生命周期怎么写才对？
setup() 不是钩子，而是整个创建阶段的统一入口；所有生命周期函数必须显式注册：
立即学习“前端免费学习笔记（深入）”；
- onMounted、onUpdated、onUnmounted 等函数需从 vue 显式导入，并在 setup 内同步调用；它们内部的 this 指向失效，依赖闭包或 reactive/ref 变量。
- setup 执行早于 beforeCreate，且没有 this；它返回的对象会合并到组件实例中——所以 ref 响应式变量、computed 计算属性、以及 onMounted 回调，都在这里统一组织。
- 多个 onMounted 可共存，按注册顺序执行；但不要在 setup 里直接操作 DOM（$el 还没生成），那是 onMounted 的事。
哪些常见坑会影响渲染表现？
生命周期本身不慢，但误用会放大性能问题：
- 在 created 里直接操作 $el —— 会报错，因为 DOM 还没影子；想预加载资源或校验配置可以，但别碰节点。
- 把大量计算逻辑塞进 mounted —— 它只执行一次，但若含复杂 DOM 遍历或样式读写，会阻塞首屏渲染；建议拆解或用 requestIdleCallback 延后。
- 递归组件无深度限制 + 全量 v-for 渲染 —— 一次性创建几百个实例，created 和 mounted 集中爆发；应配合 v-if 控制展开态，或用虚拟滚动只渲染可视区域。
- 在 updated 中修改响应式数据 —— Vue 会再次触发更新，形成无限循环；真要联动更新，用 nextTick 包裹，或改用计算属性自动派生。
