Vue 组件从创建到销毁依次经过的主要钩子(选项式 API 命名):
- 创建阶段:
beforeCreate(实例初始化完成,数据观测前)、created(数据、方法可用,但 DOM 未生成,适合做初始数据请求); - 挂载阶段:
beforeMount、mounted(DOM 已渲染,可操作节点、初始化第三方库); - 更新阶段:
beforeUpdate、updated(响应式数据变化导致重新渲染前后); - 销毁阶段:
beforeUnmount、unmounted(Vue 2 叫beforeDestroy/destroyed,清理定时器、事件监听在此进行)。
另有 activated/deactivated(<keep-alive> 缓存组件的激活与失活)、errorCaptured(捕获子孙组件错误)。
组合式 API 中对应为 onMounted、onUpdated、onUnmounted 等;注意没有 beforeCreate/created 的等价物,setup 本身就处于该时机。
易错点:created 中拿不到 $el;异步数据在 mounted 后到达时会再走更新阶段;服务端渲染只执行创建阶段钩子。追问:父组件与子组件钩子的执行顺序(创建时父前子后、挂载时子先父后)。