Vue 生命周期

组件是怎么创建、更新、销毁的?

创建阶段

beforeCreate

实例刚初始化,data 和 methods 还是 undefined。

created

实例初始化完成。data 可用了,可以发请求。但 DOM 还没生成,$el 为空。

挂载阶段

beforeMount

模板编译完成,准备挂载。

mounted

DOM 挂载完成。可以访问真实 DOM(this.$refs)。常用于第三方库初始化。

更新阶段

beforeUpdate

数据变了,但 DOM 还没更新。

updated

DOM 更新完成。别在这里改数据,会死循环

销毁阶段

beforeUnmount (Vue 2: beforeDestroy)

组件卸载前。清除定时器、解绑事件。

unmounted (Vue 2: destroyed)

组件已卸载。

Composition API

setup() 相当于 created。

其他钩子加 on 前缀:onMountedonUpdatedonUnmounted

父子组件执行顺序

加载:父 created → 父 beforeMount → 子 created → 子 beforeMount → 子 mounted → 父 mounted

销毁:父 beforeUnmount → 子 beforeUnmount → 子 unmounted → 父 unmounted

总结

阶段钩子能做什么
创建created发请求
挂载mounted操作 DOM
更新updated响应变化
销毁beforeUnmount清理资源