#Vue 生命周期详解

#1. 面试题

Q: Vue 的生命周期有哪些？created 和 mounted 有什么区别？父子组件生命周期的执行顺序是怎样的？

#2. 核心周期 (Vue 3 / Options API)

#(1) 创建阶段

• beforeCreate: 实例刚初始化，data 和 methods 还是 undefined。
• created: 实例初始化完成。data 可用，可以发送 Ajax 请求。但 DOM 还没生成，$el 为空。

#(2) 挂载阶段

• beforeMount: 模板编译完成，准备挂载。
• mounted: DOM 挂载完成。可以访问真实 DOM (this.$refs)。常用于第三方库初始化（Chart.js）。

#(3) 更新阶段

• beforeUpdate: 数据变了，但 DOM 还没变。
• updated: DOM 已经更新完成。注意：不要在这里修改数据，否则会死循环。

#(4) 销毁阶段

• beforeUnmount (Vue 2: beforeDestroy): 组件卸载前。常用于清除定时器、解绑全局事件。
• unmounted (Vue 2: destroyed): 组件已卸载。

#3. setup() 钩子 (Composition API)

setup() 本身就相当于 created 阶段。 其他钩子加 on 前缀：onMounted, onUpdated, onUnmounted。

#4. 父子组件执行顺序 (高频考点)

假设结构：Parent > Child。

加载渲染过程 (洋葱模型)：

1. Parent created
2. Parent beforeMount
3. Child created
4. Child beforeMount
5. Child mounted (子组件先挂载完)
6. Parent mounted (父组件才挂载完)

销毁过程：

1. Parent beforeUnmount
2. Child beforeUnmount
3. Child unmounted
4. Parent unmounted