Vue.js生命周期钩子是组件真实可执行的回调函数，按创建、挂载、更新、销毁四阶段运行：created适合异步请求，mounted操作DOM，beforeUpdate/updated干预更新，beforeUnmount/unmounted清理资源。
Vue.js 生命周期钩子函数是组件“生命旅程”的关键节点，不是抽象概念，而是真实可执行、有明确时序和作用边界的回调函数。掌握它们，核心在于理解每个钩子能做什么、不能做什么、该做什么——而不是死记顺序。
创建阶段：数据准备就绪，但 DOM 还没影儿
这个阶段聚焦于实例内部初始化，不涉及页面渲染。
- beforeCreate：实例刚诞生，data、methods、computed 全不可用，this 指向存在但几乎空壳。极少直接使用，适合极早期全局配置（如注入插件、设置 loading 状态）。
- created：响应式系统已启动，data 和 methods 可访问，$el 仍为 undefined。这是发起异步请求（如 API 获取列表数据）、初始化非 DOM 相关逻辑的首选时机，避免阻塞渲染。
挂载阶段：模板落地，DOM 真正可用
组件从虚拟结构变成页面上可见的元素，此时操作 DOM 才安全。
- beforeMount：模板已编译为虚拟 DOM，但尚未替换真实 DOM。this.$el 是挂载点原始 HTML（比如 ），内容还是原始模板字符串（如 {{ message }}）。可用于最后的数据微调。
- mounted：组件已真实插入页面，this.$el 包含完整渲染后的 HTML。适合初始化第三方库（如 ECharts、Mapbox）、绑定原生事件、操作 DOM 节点或触发首屏动画。
更新阶段：响应式驱动，重绘前后的精准干预
当 data 变化触发视图更新时，这两个钩子提供操作旧 DOM 或新 DOM 的窗口。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
- 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 完全一致。
