目录
[一、Vue 2 vs Vue 3 生命周期对比](#一、Vue 2 vs Vue 3 生命周期对比)
[三、为什么组合式 API 没有 beforeCreate 和 created？](#三、为什么组合式 API 没有 beforeCreate 和 created？)
[四、created 详解](#四、created 详解)
[3.1 执行时机](#3.1 执行时机)
[3.2 能做什么？](#3.2 能做什么？)
[3.3 不能做什么？](#3.3 不能做什么？)
[五、mounted 详解](#五、mounted 详解)
[4.1 执行时机](#4.1 执行时机)
[4.2 能做什么？](#4.2 能做什么？)
[Q1：Vue 3 有哪些生命周期函数？](#Q1：Vue 3 有哪些生命周期函数？)
[Q2：Vue 2 和 Vue 3 生命周期有什么区别？](#Q2：Vue 2 和 Vue 3 生命周期有什么区别？)
[Q3：onMounted 和 onUpdated 有什么区别？](#Q3：onMounted 和 onUpdated 有什么区别？)
[Q4：created 和 mounted 的区别？](#Q4：created 和 mounted 的区别？)
[Q5：什么时候用 created？什么时候用 mounted？](#Q5：什么时候用 created？什么时候用 mounted？)
[Q6：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？
javascript
<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 执行时机
组件实例刚创建好，数据初始化完成，但页面还没渲染。
javascript
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。
javascript
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 发请求，可以更早获取数据。