06.生命周期钩子

6.1 生命周期

生命周期

• 阶段在图中展示非常清晰，但实际上图中展示了两种api写法对应的钩子
  • beforeCreate: 选项式API特有的选项，在实例初始化完成并且props被解析后立即调用，此时数据data和methods等属性还没有被初始化
  • created: 选项式API特有的选项，组件实例处理完所有与状态相关的选项，此时响应式数据、计算属性、方法和侦听器已经初始化，但$el还没有挂载
  • setup：组合式API中替代beforeCreate和created的生命周期钩子，在这里将完成一切初始化工作
  • beforeMount: 组件挂载之前，此时组件的template已经编译成render函数，但还没有挂载
  • mounted: 组件挂载完成，可以访问节点
  • beforeUpdate: 组件更新之前，此时数据已经被更新
  • updated: 组件更新完成，在这里应该避免更新数据，这样可能造成死循环
  • beforeUnmount: 组件销毁之前，vue2中写作beforeDestroy
  • unmounted: 组件销毁完成，vue2中写作destroyed
• 每个钩子的函数形式都是function(()=>{}, target?)
  • 第一个参数是一个执行的回调，将在对应阶段被执行
  • target参数为可选参数，用于指定当前组件实例，默认为当前组件实例

6.2 其他钩子

• activated: 组件被激活时调用，通常是从<KeepAlive>缓存中恢复组件数据时调用
• deactivated: 组件被停用时调用，通常是转移到<KeepAlive>缓存中，表明组件从DOM中被移除时调用
• errorCaptured: 捕获组件错误时调用，通常用于错误处理，返回true表示阻止错误继续传播，返回false表示继续传播
• renderTracked: 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用
• renderTriggered: 注册一个调试钩子，当组件渲染过程中触发响应式依赖时调用