前端八股Vue---生命周期函数
目录
一、Vue 2 vs Vue 3 生命周期对比
二、图解Vue3生命周期
三、为什么组合式 API 没有 beforeCreate 和 created？
四、created 详解
3.1 执行时机
3.2 能做什么？
3.3 不能做什么？
五、mounted 详解
4.1 执行时机
4.2 能做什么？
Q1：Vue 3 有哪些生命周期函数？
Q2：Vue 2 和 Vue 3 生命周期有什么区别？
Q3：onMounted 和 onUpdated 有什么区别？
Q4：created 和 mounted 的区别？
Q5：什么时候用 created？什么时候用 mounted？
Q6：created 和 mounted 都能发请求，有什么区别？
一、Vue 2 vs Vue 3 生命周期对比
| Vue 2 | Vue 3 | 变化 |
|---|---|---|
beforeCreate | ❌ 移除 | 组合式 API 中不需要 |
created | ❌ 移除 | 组合式 API 中不需要 |
beforeMount | onBeforeMount | 名称变化 |
mounted | onMounted | 名称变化 |
beforeUpdate | onBeforeUpdate | 名称变化 |
updated | onUpdated | 名称变化 |
beforeDestroy | onBeforeUnmount | 名称变化（destroy → unmount） |
destroyed | onUnmounted | 名称变化（destroyed → unmounted） |
errorCaptured | onErrorCaptured | 名称变化 |
二、图解Vue3生命周期
┌─────────────────────────────────────────────────────────────┐ │ Vue 3 生命周期流程图 │ │ │ │ <script setup> 执行 │ │ ↓ │ │ onBeforeMount ← 挂载前 │ │ ↓ │ │ onMounted ← 挂载完成（可以操作 DOM） │ │ ↓ │ │ 数据变化 │ │ ↓ │ │ onBeforeUpdate ← 更新前 │ │ ↓ │ │ onUpdated ← 更新完成 │ │ ↓ │ │ 组件卸载 │ │ ↓ │ │ onBeforeUnmount ← 卸载前（清理工作） │ │ ↓ │ │ onUnmounted ← 卸载完成 │ │ │ └─────────────────────────────────────────────────────────────┘
三、为什么组合式 API 没有 beforeCreate 和 created？
<script setup> // 这个区域里的代码，就相当于在 created 阶段执行 // 所以不需要单独的 beforeCreate 和 created 钩子 import { ref, onMounted } from 'vue' // 这里的代码相当于 created const count = ref(0) const message = ref('Hello') // 这个相当于 mounted onMounted(() => { console.log('DOM 已挂载') }) </script>四、created 详解
3.1 执行时机
组件实例刚创建好，数据初始化完成，但页面还没渲染。
export default { data() { return { message: 'Hello', users: [] } }, created() { // 此时可以访问 data、props、methods console.log(this.message) // 'Hello' ✅ console.log(this.users) // [] ✅ this.fetchData() // 可以调用 methods ✅ // 但拿不到 DOM console.log(this.$el) // undefined ❌ document.getElementById('app') // 找不到 ❌ } }3.2 能做什么？
| 能做 | 说明 |
|---|---|
✅ 访问data | 数据已初始化 |
✅ 访问props | 父组件数据已传入 |
✅ 调用methods | 方法已挂载 |
| ✅ 发送请求 | 获取后端数据 |
| ✅ 设置定时器 | 初始化定时任务 |
✅ 访问computed、watch | 计算属性和侦听器已就绪 |
3.3 不能做什么？
| 不能做 | 原因 |
|---|---|
| ❌ 操作 DOM | DOM 还没渲染 |
| ❌ 获取元素宽高 | 元素不存在 |
| ❌ 初始化需要 DOM 的插件 | ECharts、Swiper 等需要 DOM 容器 |
五、mounted 详解
4.1 执行时机
组件已经渲染到页面上，DOM 已生成，可以安全操作 DOM。
export default { mounted() { // 此时可以访问 DOM console.log(this.$el) // DOM 元素 ✅ console.log(this.$refs.box) // ref 引用 ✅ // 可以操作 DOM const height = this.$el.offsetHeight // 获取高度 ✅ this.$refs.input.focus() // 聚焦输入框 ✅ } }4.2 能做什么？
| 能做 | 说明 |
|---|---|
| ✅ 操作 DOM | 获取、修改 DOM 元素 |
| ✅ 获取元素尺寸 | offsetWidth、getBoundingClientRect() |
| ✅ 初始化图表 | ECharts、Three.js 等 |
| ✅ 初始化第三方库 | Swiper、DatePicker 等 |
| ✅ 聚焦输入框 | input.focus() |
| ✅ 发送请求 | 也可以，但更推荐 created |
Q1：Vue 3 有哪些生命周期函数？
答：
onBeforeMount、onMounted
onBeforeUpdate、onUpdated
onBeforeUnmount、onUnmounted
onErrorCaptured注意：组合式 API 中没有
beforeCreate和created，因为<script setup>中的代码就相当于在created阶段执行。
Q2：Vue 2 和 Vue 3 生命周期有什么区别？
答：
beforeDestroy→onBeforeUnmount
destroyed→onUnmounted组合式 API 中移除了
beforeCreate和created所有生命周期函数前加上
on前缀
Q3：onMounted 和 onUpdated 有什么区别？
答：
onMounted：组件首次挂载完成后执行，只执行一次
onUpdated：组件每次更新后执行，会执行多次
Q4：created 和 mounted 的区别？
答：
created：组件实例创建完成，数据已初始化，但 DOM 还未渲染，不能操作 DOM
mounted：组件已挂载到页面，DOM 已生成，可以安全操作 DOM
两者都可以发请求，但操作 DOM 相关的代码（如初始化图表、获取元素尺寸）必须放在 mounted。
Q5：什么时候用 created？什么时候用 mounted？
答：
created：只需要初始化数据、发请求、设置定时器，不涉及 DOM 操作
mounted：需要操作 DOM、获取元素尺寸、初始化第三方库（ECharts、Swiper）
Q6：created 和 mounted 都能发请求，有什么区别？
答：
created：发请求更早，数据回来时 DOM 可能还没渲染，但不影响数据更新
mounted：发请求稍晚，但能确保 DOM 已存在
两者都可以，但更推荐在 created 发请求，可以更早获取数据。