Vue面试题03：Vue生命周期相关

生命周期相关

• 定义：每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

• Vue生命周期总共分为8个阶段：创建前后、挂载前后、更新前后、销毁前后，以及一些特殊场景的生命周期，Vue3新增了3个用于调试和服务端渲染场景。

  Vue2	Vue3	描述
  beforeCreate	beforeCreate	组件实例被创建之初
  created	created	组件实例已完成创建
  beforeMount	beforeMount	组件挂载之前
  mounted	mounted	组件挂载到实例上之后
  beforeUpdate	beforeUpdate	组件数据发生变化、更新之前
  updated	updated	组件数据更新之后
  beforeDestroy	beforeUnmounted	组件实例销毁之前
  destroyed	unmounted	组件实例销毁之后
  activated	activated	keep-alive缓存的组件激活时
  deactivated	deactivated	keep-alive缓存的组件停用时调用
  errorCaptured	errorCaptured	捕获一个来自子孙组件的错误时被调用
  -	renderTracked	调试钩子，响应式依赖被收集时调用
  -	renderTriggered	调试钩子，响应式依赖被触发时调用
  -	serverPrefetch	ssr only，组件实例在服务器上被渲染前调用

• 结合实践

  • beforeCreate：通常用于插件开发中执行一些初始化任务（比如向App实例注入全局变量、全局属性等）；

  • created：组件初始化完毕，可以访问各种数据，获取接口数据等；

  • mounted：dom已创建，可用于获取访问数据和dom元素、访问子组件等；

  • beforeUpdate：此时view层还未更新，可用于获取更新前各种状态；

  • updated：完成view层的更新，更新后，所有状态已是最新；

  • beforeunmounted：实例被销毁前调用，可用于一些定时器或订阅的取消；

  • unmounted：销毁一个实例，可清理与其它实例的连接，解绑它的全部指令及事件监听器；

• tips1：setup和created谁先执行？为什么setup中没有beforeCreate和created？

  • setup最先执行，此时组件实例在setup内部已经创建，所以created的处理对于setup来讲明显在后面，对于开发者来说已经没有意义， 所以setup中没必要再使用beforeCreate和created。

• 官方最新生命周期示意图

•