Vue 组件生命周期

生命周期阶段

1. 初始化阶段

• new Vue() 一切从 new Vue() 开始，Vue 实例被创建，初始化生命周期事件和钩子。
• beforeCreate 这是第一个钩子，此时实例刚被初始化，数据观测和事件还未开始。data 和 methods 都不可用，适合做一些初始化前的准备工作。
• created 数据观测和事件配置完成，data 和 methods 可以访问了，但 DOM 还未渲染。常用于异步请求或初始化逻辑。

2. 挂载阶段

• Has el option? 检查实例是否有 el 选项。如果没有，组件不会自动挂载（需手动调用 vm.$mount(el)）。
• Has template option? 如果有 template 选项，Vue 会编译模板生成渲染函数；否则，使用外层 HTML 作为模板。
• Compile template into render function / Compile el as template Vue 将模板编译为虚拟 DOM 的渲染函数，为后续挂载做准备。
• beforeMount 渲染函数已准备好，但 DOM 还未挂载到页面。可以用它做最后的初始化。
• Create vm.$el and replace “el” with it Vue 创建虚拟 DOM（vm.$el），并将其替换到真实的 DOM 节点上。
• mounted 组件挂载完成，真实 DOM 可用。这是常见操作 DOM 或启动插件的时机。

3. 更新阶段

• beforeUpdate 数据变化触发更新前调用，虚拟 DOM 会重新渲染，但真实 DOM 还未更新。适合记录状态或调试。
• Virtual DOM re-render and patch Vue 使用虚拟 DOM 对比新旧状态，计算差异并更新真实 DOM。
• updated DOM 更新完成后调用，可以安全地访问最新的 DOM 状态。

4. 销毁阶段

• beforeDestroy 组件销毁前调用，实例依然可用，适合清理定时器或订阅。
• Teardown watchers, child components and event listeners Vue 清理所有观察者、子组件和事件监听。
• destroyed 组件彻底销毁，所有的东西都被移除。可以用它做最后的收尾工作。
• when vm.$destroy() is called 手动调用 vm.$destroy() 才会触发销毁流程。

实际应用场景

• created：发起 AJAX 请求，获取初始数据。
• mounted：初始化第三方插件（如图表库）或绑定事件。
• beforeUpdate：监控数据变化前的状态。
• beforeDestroy：清除 setInterval 或 WebSocket 连接。