Vue生命周期详细解析

前言

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

一、Vue生命周期概述

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

生命周期图示

图片来源官方

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

1. 创建阶段

beforeCreate

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

beforeCreate() {console.log('beforeCreate:', this.message); // undefinedconsole.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); // 渲染后的DOMthis.$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	缓存组件停用时的状态保存

五、注意事项

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

六、总结

理解Vue生命周期对于开发高质量的Vue应用至关重要。通过合理利用生命周期钩子，我们可以在适当的时机执行代码，优化应用性能，处理各种边界情况。建议开发者在实际项目中多加练习，深入理解每个生命周期的特点和适用场景。