Vue 组件从创建到销毁依次经过的主要钩子(选项式 API 命名):

  • 创建阶段beforeCreate(实例初始化完成,数据观测前)、created(数据、方法可用,但 DOM 未生成,适合做初始数据请求);
  • 挂载阶段beforeMountmounted(DOM 已渲染,可操作节点、初始化第三方库);
  • 更新阶段beforeUpdateupdated(响应式数据变化导致重新渲染前后);
  • 销毁阶段beforeUnmountunmounted(Vue 2 叫 beforeDestroy/destroyed,清理定时器、事件监听在此进行)。

另有 activated/deactivated<keep-alive> 缓存组件的激活与失活)、errorCaptured(捕获子孙组件错误)。

组合式 API 中对应为 onMountedonUpdatedonUnmounted 等;注意没有 beforeCreate/created 的等价物,setup 本身就处于该时机。

易错点:created 中拿不到 $el;异步数据在 mounted 后到达时会再走更新阶段;服务端渲染只执行创建阶段钩子。追问:父组件与子组件钩子的执行顺序(创建时父前子后、挂载时子先父后)。