组件是怎么创建、更新、销毁的?
实例刚初始化,data 和 methods 还是 undefined。
实例初始化完成。data 可用了,可以发请求。但 DOM 还没生成,$el 为空。
模板编译完成,准备挂载。
DOM 挂载完成。可以访问真实 DOM(this.$refs)。常用于第三方库初始化。
数据变了,但 DOM 还没更新。
DOM 更新完成。别在这里改数据,会死循环。
组件卸载前。清除定时器、解绑事件。
组件已卸载。
setup() 相当于 created。
其他钩子加 on 前缀:onMounted、onUpdated、onUnmounted。
加载:父 created → 父 beforeMount → 子 created → 子 beforeMount → 子 mounted → 父 mounted
销毁:父 beforeUnmount → 子 beforeUnmount → 子 unmounted → 父 unmounted
| 阶段 | 钩子 | 能做什么 |
|---|---|---|
| 创建 | created | 发请求 |
| 挂载 | mounted | 操作 DOM |
| 更新 | updated | 响应变化 |
| 销毁 | beforeUnmount | 清理资源 |