Vue实例生命周期包含创建（beforeCreate→created）、挂载（beforeMount→mounted）、更新（beforeUpdate→updated）、销毁（beforeUnmount→unmounted）四阶段；各钩子明确标识数据、DOM、实例状态的就绪情况，核心逻辑集中于created、mounted和beforeUnmount。
Vue 实例从创建到销毁的过程，会经历一系列关键阶段，每个阶段对应一个生命周期钩子函数。掌握它们的执行顺序和适用场景，是写出可维护、高性能 Vue 应用的基础。
创建阶段：beforeCreate → created
这是 Vue 实例初始化的起点。在 beforeCreate 中，data、methods、computed 等都还未初始化，this 指向实例但几乎不可用；紧接着进入 created，此时 data 响应式已建立、methods 已绑定、watch/computed 已配置，但 DOM 还未挂载。
- 适合在 created 中发起初始数据请求（如 API 获取列表）、设置事件监听器（非 DOM 相关）、初始化非响应式数据（如第三方库实例）
- 避免在 beforeCreate 中操作 this 或尝试访问 data —— 会报 undefined
挂载阶段：beforeMount → mounted
beforeMount 发生在模板编译完成、虚拟 DOM 创建完毕但尚未渲染到页面前；mounted 则表示真实 DOM 已挂载完成，$el 可访问。
- 可在 mounted 中操作 DOM（如聚焦输入框、初始化图表库 ECharts、启动轮播）、启动定时器、绑定全局事件（resize、scroll）
- beforeMount 使用较少，一般仅用于调试或极早期的 DOM 结构预处理（不推荐）
- 注意：服务端渲染（SSR）中，mounted 不会在服务端执行，只在客户端生效
更新阶段：beforeUpdate → updated
当响应式数据变化触发重新渲染时，这两个钩子依次执行。beforeUpdate 时 DOM 尚未更新，但 data 已是最新值；updated 时 DOM 已根据新数据完成重绘。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- beforeUpdate 可用于在更新前保存状态（如滚动位置）、取消不必要的计算
- updated 适合执行依赖于新 DOM 的操作（如调整 canvas 尺寸、重新初始化某插件），但要避免在此修改 data —— 可能引发无限循环
- 频繁触发时建议加防抖，或优先使用 watch + nextTick 替代
销毁阶段：beforeUnmount → unmounted（Vue 3） / beforeDestroy → destroyed（Vue 2）
组件即将被移除前触发 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2），此时实例仍完全可用；unmounted（或 destroyed）表示实例已解绑，所有指令、事件监听器、子组件均被清理。
- 务必在 beforeUnmount 中清理副作用：清除定时器、解绑全局事件（window.removeEventListener）、取消未完成的请求（abort controller）、销毁第三方实例（如 Map、Chart）
- unmounted 中 this 已不可靠，不应再访问 data 或调用 methods
- 使用 Composition API 时，onBeforeUnmount / onUnmounted 提供了更清晰的逻辑组织方式
理解每个钩子的“什么已就绪、什么还未发生”，比死记顺序更重要。实际开发中，多数业务逻辑落在 created、mounted 和 beforeUnmount 三个节点上，其余钩子按需谨慎使用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
