vue生命周期函数

一、初始化阶段（创建前后）

钩子	触发时机	能做什么（或注意什么）
beforeCreate	实例刚初始化，数据观测 (data) 和事件 (watcher) 都还未设置。	很少用。此时拿不到 data、methods 等。
created	实例创建完成，数据观测、计算属性、方法都已配置好，但 DOM 还未生成（$el 不存在）。	最常用。适合调用接口获取数据、初始化非响应式变量。此时不能操作DOM。

二、挂载阶段（挂载前后）

钩子	触发时机	能做什么（或注意什么）
beforeMount	挂载开始之前，render 函数首次被调用。	很少用。此时 $el 还是占位符，虚拟DOM尚未生成真实DOM。
mounted	组件首次渲染完成，真实DOM已挂载到页面（$el 已存在）。	常用。适合操作DOM、使用第三方UI库初始化（如ECharts图表）、或需要依赖DOM尺寸的逻辑。注意：该钩子不保证所有子组件都已挂载，若需等待全部子组件，可使用 $nextTick。

三、更新阶段（数据变化引起的重新渲染前后）

钩子	触发时机	能做什么（或注意什么）
beforeUpdate	数据已变化，但 DOM 尚未重新渲染。	适合在更新前访问现有DOM（如手动移除事件监听）。不建议在此修改数据，否则会触发死循环。
updated	数据变化导致 DOM 重新渲染完成。	适合执行依赖新DOM的操作。注意：此时修改数据同样会引发无限循环，如需操作，请用 $nextTick 并加条件判断。

四、销毁阶段（卸载前后）

钩子	触发时机	能做什么（或注意什么）
beforeDestroy (Vue2)，beforeUnmount (Vue3)	组件即将卸载，但实例仍完全可用。	重要：适合清除定时器 (setInterval)、取消事件订阅、解绑全局事件等清理工作，防止内存泄漏。
destroyed (Vue2)，unmounted (Vue3)	组件已完全卸载，所有子组件和响应式绑定都被移除。	可以做最后的垃圾回收或通知操作，但日常开发较少用。

生命周期图示（简化流程）
text
new Vue() / setup()
↓
beforeCreate → created （数据准备好了）
↓
beforeMount → mounted （DOM渲染好了） ← 此处可操作DOM
↓
【数据变化触发更新】
↓
beforeUpdate → updated （DOM更新好了） ← 此处可获取最新DOM
↓
【组件被销毁】
↓
beforeDestroy / beforeUnmount （清理工作）
↓
destroyed / unmounted （组件销毁）