在Vue.js中**生命周期Lifecycle**指的是一个 Vue 组件从创建 → 挂载 → 更新 → 销毁的整个过程。在这些阶段Vue 会自动调用对应的生命周期钩子函数Lifecycle Hooks开发者可以在这些函数中执行逻辑比如请求数据、操作 DOM 等。Vue 不同版本生命周期略有区别最常见的是Vue2和Vue3。先以Vue2为主说明执行机制。一、Vue 生命周期流程Vue2Vue 生命周期主要分为4个阶段阶段生命周期钩子创建阶段beforeCreate → created挂载阶段beforeMount → mounted更新阶段beforeUpdate → updated销毁阶段beforeDestroy → destroyed二、生命周期执行顺序完整执行顺序如下beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed执行机制可以理解为初始化 ↓ 创建实例 ↓ 挂载DOM ↓ 数据更新 ↓ 组件销毁三、各生命周期详解1 beforeCreate创建前特点Vue实例刚创建data、methods 还没初始化不能访问 databeforeCreate() { console.log(this.data) // undefined }常见用途基本不用。2 created创建完成特点data、methods 已初始化可以访问 dataDOM 还没生成created() { console.log(this.msg) }常见用途请求接口初始化数据启动定时器例如created(){ this.getList() }3 beforeMount挂载前特点模板编译完成DOM 还没渲染到页面一般很少使用。4 mounted挂载完成特点DOM 已经生成可以操作 DOMmounted() { console.log(this.$el) }常见用途DOM操作第三方库初始化例如EChartsSwipermounted(){ this.initChart() }5 beforeUpdate更新前当data 数据改变时触发。特点数据更新DOM 还没更新6 updated更新后DOM 更新完成。updated(){ console.log(页面已更新) }注意不要在 updated 里修改 data否则会死循环。7 beforeDestroy销毁前组件即将销毁。常见用途清除定时器移除事件监听beforeDestroy(){ clearInterval(this.timer) }8 destroyed销毁后组件已经被销毁。事件监听移除子组件销毁DOM移除四、Vue 生命周期执行机制核心原理Vue 生命周期的本质流程new Vue() ↓ 初始化生命周期 ↓ 初始化事件 ↓ 初始化数据 ↓ created ↓ 编译 template → render ↓ 生成 Virtual DOM ↓ beforeMount ↓ 渲染真实 DOM ↓ mounted ↓ 数据变化 ↓ Virtual DOM diff ↓ 更新 DOM ↓ updated ↓ 组件销毁 ↓ beforeDestroy ↓ destroyed这里涉及两个核心机制1 虚拟DOMVirtual DOMVue 使用Virtual DOM diff 算法来更新页面而不是直接操作 DOM提高性能。2 响应式系统当 data 变化时data变化 ↓ 触发setter ↓ 通知Watcher ↓ 重新render ↓ 更新DOM五、Vue3 生命周期对比在Vue.js中生命周期改为Vue2Vue3beforeCreatesetupcreatedsetupbeforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmounted示例import { onMounted } from vue onMounted((){ console.log(组件已挂载) })六、面试高频总结很重要面试常问1 生命周期顺序beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed2 created 和 mounted 区别createdmountedDOM未生成DOM已生成可以请求接口可以操作DOM3 哪个生命周期请求接口一般在created 或 mounted。