Vue 中的生命周期函数及其作用

1.创建阶段（Initialization）

• beforeCreate

  • 触发时机：实例初始化后，数据观测（data）和事件配置前。

  • 作用：无法访问 data 和 methods，通常用于插件初始化。

• created

  • 触发时机：数据观测完成，methods 和 data 已初始化。

  • 作用：发起异步请求、初始化非响应式变量。

2. 挂载阶段（DOM Insertion）

• beforeMount

  • 触发时机：模板编译完成，但尚未将 DOM 挂载到页面。

  • 作用：极少使用，可在渲染前最后修改数据。

• mounted

  • 触发时机：DOM 已挂载到页面，可访问 this.$el。

  • 作用：操作 DOM、初始化第三方库（如图表库）、绑定全局事件。

3. 更新阶段（Re-render）

• beforeUpdate

  • 触发时机：数据变化后，DOM 重新渲染前。

  • 作用：获取更新前的 DOM 状态（如滚动位置）。

• updated

  • 触发时机：DOM 已重新渲染完成。

  • 作用：依赖 DOM 的操作（如更新后的元素尺寸计算）。

4. 销毁阶段（Teardown）

• beforeUnmount（Vue3）/ beforeDestroy（Vue2）

  • 触发时机：实例销毁前。

  • 作用：清理定时器、解绑全局事件，防止内存泄漏。

• unmounted（Vue3）/ destroyed（Vue2）

  • 触发时机：实例已销毁，所有子组件也被移除。

  • 作用：极少使用，用于最终状态报告。

5. 错误捕获（Error Handling）

• errorCaptured

  • 触发时机：子孙组件抛出错误时。

  • 作用：捕获错误并决定是否阻止错误继续向上传播。

总结：Vue 的生命周期函数（如 created、mounted、updated 等）定义了组件从初始化、挂载、更新到销毁的关键阶段，允许开发者在特定时机执行数据初始化、DOM 操作、状态更新或清理副作用等逻辑。