Vue.js 生命周期钩子函数：从创建到销毁的完整流程-Vue.js-PHP中文网

vue.js生命周期钩子是组件真实可执行的回调函数，按创建、挂载、更新、销毁四阶段运行：created适合异步请求，mounted操作dom，beforeupdate/updated干预更新，beforeunmount/unmounted清理资源。

vue.js 生命周期钩子函数：从创建到销毁的完整流程

Vue.js 生命周期钩子函数是组件“生命旅程”的关键节点，不是抽象概念，而是真实可执行、有明确时序和作用边界的回调函数。掌握它们，核心在于理解每个钩子能做什么、不能做什么、该做什么——而不是死记顺序。

这个阶段聚焦于实例内部初始化，不涉及页面渲染。

beforeCreate：实例刚诞生，data、methods、computed 全不可用，this 指向存在但几乎空壳。极少直接使用，适合极早期全局配置（如注入插件、设置 loading 状态）。
created：响应式系统已启动，data 和 methods 可访问，$el 仍为 undefined。这是发起异步请求（如 API 获取列表数据）、初始化非 DOM 相关逻辑的首选时机，避免阻塞渲染。

组件从虚拟结构变成页面上可见的元素，此时操作 DOM 才安全。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

beforeMount：模板已编译为虚拟 DOM，但尚未替换真实 DOM。this.$el 是挂载点原始 HTML（比如
），内容还是原始模板字符串（如 {{ message }}）。可用于最后的数据微调。
mounted：组件已真实插入页面，this.$el 包含完整渲染后的 HTML。适合初始化第三方库（如 ECharts、Mapbox）、绑定原生事件、操作 DOM 节点或触发首屏动画。

当 data 变化触发视图更新时，这两个钩子提供操作旧 DOM 或新 DOM 的窗口。

beforeUpdate：虚拟 DOM 差异计算完成，真实 DOM 尚未更新。可访问更新前的 DOM 状态，适合记录滚动位置、移除临时事件监听等。
updated：DOM 已完成重绘。可执行依赖最新 DOM 的操作（如调整图表尺寸、聚焦输入框）。注意：此处修改 data 会再次触发更新，慎防无限循环。

组件卸载前的清理工作，直接影响应用长期稳定性。

beforeUnmount（Vue 3） / beforeDestroy（Vue 2）：实例仍完全可用，是清除定时器、解绑事件监听、取消网络请求的最后机会。
unmounted（Vue 3） / destroyed（Vue 2）：清理已完成，实例已解绑。通常无需在此写逻辑，仅用于确认销毁或日志记录。

整个流程是单向、不可逆的，每个钩子只执行一次（更新阶段除外）。Vue 3 Composition API 中对应钩子为 onBeforeMount、onMounted 等，语义更清晰，但执行时机与 Options API 完全一致。