Vue生命周期详细解析

news2025/4/25 22:17:48

前言

Vue.js作为当前最流行的前端框架之一，其生命周期钩子函数是每个Vue开发者必须掌握的核心概念。本文将全面解析Vue的生命周期，帮助开发者更好地理解Vue实例的创建、更新和销毁过程。

一、Vue生命周期概述

Vue实例从创建到销毁的整个过程被称为Vue的生命周期。在这个过程中，Vue提供了一系列的钩子函数（生命周期钩子），允许开发者在特定阶段添加自己的代码。

生命周期图示

在这里插入图片描述
图片来源官方

二、生命周期钩子函数详解

1. 创建阶段

beforeCreate

调用时机：实例初始化之后，数据观测(data observer)和event/watcher事件配置之前
特点：
- 此时无法访问到data、computed、methods等
- 常用于插件开发中执行一些初始化任务

beforeCreate() {
  console.log('beforeCreate:', this.message); // undefined
  console.log('beforeCreate:', this.sayHello); // undefined
}

created

调用时机：实例创建完成后立即调用
特点：
- 可以访问data、computed、methods等
- 尚未挂载DOM，$el属性不可用
- 常用于异步数据请求

created() {
  console.log('created:', this.message); // 可以访问
  console.log('created:', this.sayHello()); // 可以调用
  console.log('created:', this.$el); // undefined
}

2. 挂载阶段

beforeMount

调用时机：在挂载开始之前被调用
特点：
- 模板编译完成，但尚未将模板渲染到页面
- 很少使用，了解即可

beforeMount() {
  console.log('beforeMount:', this.$el); // 原始的挂载元素
}

mounted

调用时机：实例被挂载后调用
特点：
- 可以访问到渲染后的DOM
- 常用于需要操作DOM的第三方库初始化
- 注意：不保证所有子组件也都一起被挂载

mounted() {
  console.log('mounted:', this.$el); // 渲染后的DOM
  this.$nextTick(() => {
    // 仅在整个视图都被渲染之后才会运行的代码
  });
}

3. 更新阶段

beforeUpdate

调用时机：数据变化时，虚拟DOM重新渲染和打补丁之前
特点：
- 可以在更新前访问现有的DOM
- 适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

beforeUpdate() {
  console.log('beforeUpdate:', this.message);
}

updated

调用时机：数据更改导致的虚拟DOM重新渲染和打补丁后
特点：
- 可以执行依赖于DOM的操作
- 注意：避免在此钩子中更改状态，可能会导致无限循环
- 不保证所有的子组件也都一起被重绘

updated() {
  console.log('updated:', this.message);
  this.$nextTick(() => {
    // 仅在整个视图都被重新渲染之后才会运行的代码
  });
}

4. 销毁阶段

beforeDestroy

调用时机：实例销毁之前
特点：
- 实例仍然完全可用
- 适合清除定时器、取消事件监听、取消订阅等清理工作

beforeDestroy() {
  console.log('beforeDestroy');
  clearInterval(this.timer);
}

destroyed

调用时机：实例销毁后
特点：
- 所有的事件监听器和子实例都被移除
- 很少使用，了解即可

destroyed() {
  console.log('destroyed');
}

三、特殊生命周期钩子

activated

使用场景：<keep-alive>缓存的组件激活时调用
特点：可用于重新获取数据或重置状态

activated() {
  console.log('组件被激活');
}

deactivated

使用场景：<keep-alive>缓存的组件停用时调用
特点：可用于保存状态或清除定时器

deactivated() {
  console.log('组件被停用');
}

errorCaptured

使用场景：捕获来自子孙组件的错误时调用
特点：
- 可以返回false阻止错误继续向上传播
- 可用于错误上报

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

四、生命周期使用场景总结

生命周期钩子	常见使用场景
beforeCreate	插件开发、初始化任务
created	异步数据请求、初始化非DOM相关操作
beforeMount	极少使用
mounted	DOM操作、第三方库初始化
beforeUpdate	更新前访问现有DOM
updated	数据更新后的DOM操作
beforeDestroy	清除定时器、取消事件监听、取消订阅
destroyed	极少使用
activated	缓存组件重新激活时的数据获取
deactivated	缓存组件停用时的状态保存

五、注意事项

避免在生命周期钩子中使用箭头函数，这会改变this的指向
异步操作的影响：异步操作可能导致生命周期钩子的执行顺序不如预期
父子组件生命周期顺序：
- 父beforeCreate → 父created → 父beforeMount → 子beforeCreate → 子created → 子beforeMount → 子mounted → 父mounted
更新顺序：父beforeUpdate → 子beforeUpdate → 子updated → 父updated