当前位置：首页 > news >正文

Vue 实例生命周期

news 来源：原创 2025/5/30 12:22:13

一、前言

在使用 Vue 开发应用时，我们经常需要在组件加载、更新或销毁时执行一些特定逻辑，例如：

页面初始化时请求数据；
数据变化时更新 DOM 或发送埋点；
组件卸载时清除定时器、取消事件监听等资源释放操作。

Vue 提供了一套完整的生命周期钩子函数（Lifecycle Hooks），允许我们在组件的不同阶段插入自定义逻辑。掌握 Vue 实例的生命周期，是构建可维护、高性能 Vue 应用的关键。

本文将带你深入了解 Vue 实例（包括 Vue 2 和 Vue 3）的完整生命周期流程，并结合实际开发场景讲解每个钩子的作用和使用技巧。

二、什么是生命周期？

生命周期 是指一个 Vue 实例从被创建到最终被销毁的整个过程。在这个过程中，Vue 会自动调用一些钩子函数（Hook），我们可以利用这些钩子来插入自己的逻辑代码。

📌 生命周期本质上是一个状态机模型，不同阶段触发不同回调函数。

三、Vue 2 实例生命周期流程图概览

以下是 Vue 2 实例的生命周期流程图简要概括：

beforeCreate↓
created↓
beforeMount↓
mounted↓
beforeUpdate↓
updated↓
beforeDestroy↓
destroyed

四、Vue 2 各个生命周期钩子详解

1. `beforeCreate`

触发时机：实例刚被创建，data 和 methods 还未被初始化。
使用场景：极少使用，因为无法访问 data 和 methods。
特点：此时尚未解析选项，不能访问任何响应式数据。

beforeCreate() {console.log('beforeCreate: 尚未访问 data');
}

2. `created`

触发时机：实例已经创建完成，data 和 methods 已经可以访问。
使用场景：常用于发起异步请求（如 API 请求）、初始化数据。
注意：此时还没有挂载 DOM，不能操作 DOM 元素。

created() {console.log('created: data 已初始化', this.message);
}

3. `beforeMount`

触发时机：模板编译/渲染函数已准备好，但尚未把虚拟 DOM 渲染成真实 DOM。
使用场景：较少使用，通常用于性能监控或预处理。

beforeMount() {console.log('beforeMount: 模板即将渲染');
}

4. `mounted`

触发时机：模板已经成功渲染为真实 DOM，此时可以安全地操作 DOM。
使用场景：最常用的钩子之一，用于：
- 初始化第三方库（如 ECharts 图表）
- 获取 DOM 节点信息
- 发送网络请求并绑定数据
- 注册事件监听

mounted() {console.log('mounted: DOM 已渲染完毕', document.getElementById('myDiv'));
}

5. `beforeUpdate`

触发时机：响应式数据发生改变，但视图还未更新。
使用场景：可用于获取更新前的 DOM 状态，用于后续对比或动画控制。

beforeUpdate() {console.log('beforeUpdate: 数据已变更，DOM 即将更新');
}

6. `updated`

触发时机：数据更新导致虚拟 DOM 重新渲染和打补丁后。
使用场景：适用于依赖 DOM 更新后的操作，如重新初始化插件、手动触发动画等。
注意：避免在此修改数据，否则可能导致死循环。

updated() {console.log('updated: DOM 已更新');
}

7. `beforeDestroy`

触发时机：实例即将被销毁时调用。
使用场景：清理操作，如：
- 移除事件监听器
- 清除定时器
- 取消长连接
- 解绑全局变量或状态

beforeDestroy() {clearInterval(this.timer); // 假设之前设置了定时器console.log('beforeDestroy: 正在清理资源');
}

8. `destroyed`

触发时机：实例已经被销毁，所有指令都已解绑，子组件也已被销毁。
使用场景：一般不做复杂操作，仅用于日志记录或调试。

destroyed() {console.log('destroyed: 实例已销毁');
}

五、Vue 3 生命周期的变化（Composition API）

在 Vue 3 的 Composition API 写法中，生命周期钩子发生了变化：

Vue 2 钩子名	Vue 3 Composition API
`beforeCreate`	不再需要（setup 代替）
`created`	不再需要（setup 代替）
`beforeMount`	`onBeforeMount()`
`mounted`	`onMounted()`
`beforeUpdate`	`onBeforeUpdate()`
`updated`	`onUpdated()`
`beforeDestroy`	`onBeforeUnmount()`
`destroyed`	`onUnmounted()`

示例（Vue 3 + Composition API）：

<script setup>
import { onMounted, onUnmounted } from 'vue'let timer = nullonMounted(() => {console.log('组件已挂载')timer = setInterval(() => {console.log('每秒打印一次')}, 1000)
})onUnmounted(() => {console.log('组件即将卸载')clearInterval(timer)
})
</script>

六、常见应用场景总结

场景	推荐生命周期钩子
初始化数据	`created` / `onMounted`
请求数据	`created` / `onMounted`
操作 DOM	`mounted` / `onMounted`
注册/移除事件监听	`mounted` + `beforeDestroy` / `onMounted` + `onUnmounted`
设置定时器	`mounted` / `onMounted`
清理定时器、资源	`beforeDestroy` / `onUnmounted`
响应数据更新	`updated` / `onUpdated`