vue组件生命周期是分阶段、协作式执行机制：挂载阶段beforemount生成vnode但不可操作dom，mounted才可安全操作真实节点；更新阶段beforeupdate读旧dom，updated后操作新dom但禁改响应式数据；销毁阶段beforeunmount清理副作用，unmounted后实例失效。

Vue 组件的渲染挂载与销毁不是线性流程，而是受响应式系统驱动、按阶段分层执行的协作机制。关键不在记住钩子顺序，而在理解每个阶段能做什么、不能做什么，以及为什么必须在特定时机做特定事。

挂载阶段：从虚拟 DOM 到真实节点的落地

挂载不是“一气呵成”，而是分两步走：先生成虚拟 DOM（beforeMount），再插入真实 DOM（mounted）。这两步之间有明确能力边界：

• beforeMount 时，模板已编译为 VNode，但 $el 还只是原始 HTML 字符串（比如仍显示 {{ message }}），无法操作真实节点；适合做最后的渲染前干预，如动态修改 props 或注入上下文。
• mounted 是首个能安全读写真实 DOM 的节点——this.$el 和 ref 全部可用；第三方库（ECharts、地图 SDK、动画库）必须在此初始化，否则会报“找不到容器”。
• 注意：不要在 mounted 中直接改 data 触发重渲染，除非你明确需要一次初始更新；多数场景下，初始化数据应在 created 阶段完成。

更新阶段：DOM 同步的精准窗口

更新由响应式数据变化触发，整个过程围绕“旧 DOM → 新 VNode → 打补丁 → 新 DOM”展开：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

• beforeUpdate 是读取旧 DOM 的最后机会，可用于保存滚动位置、移除临时事件监听器或记录变更前状态。
• updated 表示 DOM 已同步完成，可执行依赖新结构的操作，比如调用 getBoundingClientRect()、重置表单焦点、或通知父组件尺寸变化。
• 严禁在 updated 中修改响应式数据——这会再次触发更新，形成无限循环；如需后续逻辑，应使用 nextTick 延迟到下次 DOM 更新后执行。

销毁阶段：清理副作用的强制窗口

组件卸载不等于自动回收资源。Vue 只负责解绑指令和移除监听器，但定时器、全局事件、WebSocket 连接等需手动清理：

• beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）是清理工作的主入口：清除 setInterval、addEventListener、eventBus.off、router.beforeEach 等订阅。
• unmounted 或 destroyed 之后，实例已解绑，this 不再有效，不能再访问 data 或调用 methods；仅适合做日志上报或状态归档等收尾动作。
• 若使用 keep-alive，组件不会走完整销毁流程，而是切换为 deactivated → activated 循环，此时清理逻辑需放在 deactivated 中。

父子与递归组件的执行节奏

生命周期不是孤立运行，而是在组件树中按深度优先、自上而下再自下而上协同推进：

• 挂载时：父组件 beforeMount → 子组件 created → 子组件 mounted → 父组件 mounted；子组件必须就绪，父组件才完成挂载。
• 更新时：父组件 beforeUpdate → 子组件 beforeUpdate → 子组件 updated → 父组件 updated；确保子组件 DOM 先更新，父组件再响应整体变化。
• 销毁时：父组件 beforeUnmount → 子组件 beforeUnmount → 子组件 unmounted → 父组件 unmounted；避免父组件释放资源时子组件还在运行。

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