Vue2生命周期函数解析与应用

目录

一、核心生命周期流程

二、生命周期函数详解

1. beforeCreate

2. created

3. beforeMount

4. mounted

5. beforeUpdate

6. updated

7. beforeDestroy

8. destroyed

三、Vue2与Vue3生命周期对比

四、最佳实践建议

一、核心生命周期流程

graph TD
A[初始化] --> B[beforeCreate]
B --> C[created]
C --> D[模板编译]
D --> E[beforeMount]
E --> F[mounted]
F --> G{数据更新?}
G --是--> H[beforeUpdate]
H --> I[updated]
G --否--> J{销毁触发?}
J --是--> K[beforeDestroy]
K --> L[destroyed]

二、生命周期函数详解

1. beforeCreate

定义时机：实例初始化后，数据观测/事件配置前，
代码示例：

export default {
  beforeCreate() {
    console.log(this.$data); // undefined
    console.log(this.$el);   // undefined
  }
}

业务场景：

• 初始化非响应式变量
• 插件的基础配置

底层逻辑：
Vue实例刚创建，尚未建立数据观测机制，此时无法访问组件数据和方法。

2. created

定义时机：实例创建完成，数据观测就绪
代码示例：

export default {
  data() {
    return { count: 0 }
  },
  created() {
    console.log(this.count); // 0
    this.fetchData();
  }
}

业务场景：

• API数据请求
• 计算属性初始化
• 事件监听器注册

底层逻辑：
已完成数据绑定，但尚未生成DOM结构，此时可安全操作数据但不可操作DOM

3. beforeMount

定义时机：挂载开始前，首次render调用前
代码示例：

export default {
  beforeMount() {
    console.log(this.$el.innerHTML); // 空内容
  }
}

业务场景：

• 服务端渲染前的最后调整
• 动态修改模板内容

底层逻辑：
已完成模板编译，生成虚拟DOM，但尚未替换真实DOM节点

4. mounted

定义时机：实例挂载到DOM后
代码示例：

export default {
  mounted() {
    this.$refs.button.addEventListener('click', this.handleClick);
    this.initChart();
  }
}

业务场景：

• DOM操作
• 第三方库初始化
• 定时器启动

底层逻辑：
已完成真实DOM替换，可通过$el访问渲染结果

5. beforeUpdate

定义时机：数据变化后，虚拟DOM重渲染前
代码示例：

export default {
  beforeUpdate() {
    console.log('当前状态:', this.$el.innerHTML);
  }
}

业务场景：

• 更新前的状态记录
• 手动移除旧事件监听

底层逻辑：
数据变化触发重新渲染流程，此时可获取更新前的DOM状态

6. updated

定义时机：虚拟DOM重新渲染完成
代码示例：

export default {
  updated() {
    this.updateChart();
    this.bindNewEvents();
  }
}

业务场景：

• 依赖新DOM的操作
• 数据更新后的回调处理

底层逻辑：
完成DOM更新，此时可安全操作新生成的DOM元素

7. beforeDestroy

定义时机：实例销毁前
代码示例：

export default {
  beforeDestroy() {
    clearInterval(this.timer);
    this.$bus.$off('event');
  }
}

业务场景：

• 资源释放
• 事件解绑
• 数据持久化

底层逻辑：
实例仍保持完整功能，但即将进入销毁流程

8. destroyed

定义时机：实例完全销毁后
代码示例：

export default {
  destroyed() {
    console.log(this.$el);   // null
    console.log(this.count); // undefined
  }
}

业务场景：

• 内存泄漏检测
• 销毁后的日志记录

底层逻辑：
所有绑定和监听器已被移除，子实例也被销毁

三、Vue2与Vue3生命周期对比

主要改进：

1. 命名规范：使用更语义化的名称（如unmount替代destroy）
2. 组合式API：通过import方式引入生命周期函数
3. 逻辑聚合：相关逻辑可在setup()中集中管理

四、最佳实践建议

1. 避免在beforeCreate中操作响应式数据
2. 异步操作推荐在created阶段启动
3. DOM操作必须等待mounted阶段
4. 使用$once监听钩子函数：

mounted() {
  this.$once('hook:beforeDestroy', () => {
    clearTimeout(this.timer)
  })
}

1. 组合式API示例：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载完成');
    });
  }
}