Vue的生命周期

Vue的生命周期

Vue的生命周期钩子函数可以分为四个主要阶段：创建（Creation）、挂载（Mounting）、更新（Updating）和销毁（Destruction）。以下是各阶段的钩子函数及其作用，以Vue 3为主，同时对比Vue 2的差异：

一、创建阶段（Creation）

1. beforeCreate

   • 触发时机：实例初始化后，数据观测（data）和事件配置（methods）之前。
   • 用途：一般用于插件初始化（如Vuex状态注入），此时无法访问 data、methods 等。
   • Vue 3差异：在Composition API中，setup() 替代了 beforeCreate 和 created。

2. created

   • 触发时机：实例创建完成，数据观测和事件配置完成，但DOM未生成。
   • 用途：可访问 data 和 methods，常用于异步请求数据或初始化非DOM相关操作。

二、挂载阶段（Mounting）

3. beforeMount

   • 触发时机：模板编译完成，但尚未将生成的DOM挂载到页面。
   • 用途：极少使用，一般用于服务端渲染（SSR）。

4. mounted

   • 触发时机：DOM挂载完成，页面渲染完毕。
   • 用途：操作DOM（如初始化图表库）、绑定第三方插件（如地图SDK）。
   • 注意：若子组件需要等待父组件挂载完成，需使用 $nextTick。

三、更新阶段（Updating）

5. beforeUpdate

   • 触发时机：数据变化后，DOM重新渲染前。
   • 用途：获取更新前的DOM状态（如滚动位置），对比新旧数据。

6. updated

   • 触发时机：DOM重新渲染完成。
   • 用途：DOM更新后的操作（如更新第三方库）。
   • 注意：避免在此钩子中修改数据，可能导致无限循环。

四、销毁阶段（Destruction）

7. beforeUnmount（Vue 2中为 beforeDestroy）

   • 触发时机：实例销毁前。
   • 用途：清理资源（如移除事件监听、清除定时器、取消未完成的请求）。

8. unmounted（Vue 2中为 destroyed）

   • 触发时机：实例销毁完成，所有子组件也被销毁。
   • 用途：极少操作，用于确认销毁后的状态。

五、其他特殊钩子

1. activated / deactivated

   • 用途：与 <keep-alive> 组件结合，缓存组件状态（如页面返回时恢复滚动位置）。
   • 示例：

     activated() {
       this.startAutoRefresh(); // 恢复定时任务
     },
     deactivated() {
       this.stopAutoRefresh(); // 暂停定时任务
     }
     

2. errorCaptured

   • 用途：捕获子孙组件的错误（类似React的Error Boundary）。
   • 示例：

     errorCaptured(err, vm, info) {
            
       console.error('捕获到错误:', err);
       return false; // 阻止错误继续向上传播
     }
     

Vue 3的Composition API变化

• setup() 函数替代了 beforeCreate 和 created。
• 生命周期钩子前缀 on（需显式导入）：

  import {
        onMounted, onUnmounted } from 'vue';
  
  setup() {
       
    onMounted(() => {
       
      console.log('组件已挂载');
    })