简介

vue生命周期

一、vue2和vue3对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// vue3和vue2对比生命周期
const changePoint = {
  beforeCreate: setup(), // 实例初始化后，数据和方法等配置之前调用
  created: setup(), // 数据和方法等配置好后
  beforeMount: onBeforeMount, // 挂载前
  mounted: onMounted, // 有了$el并挂载后
  beforeUpdate: onBeforeUpdate, // 数据更新后，重新渲染前
  updated: onUpdated, // 虚拟dom重渲染后，这里可以执行依赖dom的操作
  beforeDestroy: onBeforeUnmount, // 销毁前
  destroyed: onUnmounted, // 销毁
  activated: onActivated, // keep-alive 组件激活时调用。
  deactivated: onDeactivated, // keep-alive 组件停用时调用。
  errorCaptured: onErrorCaptured, // 当捕获一个来自子孙组件的异常时激活钩子函数
  // 新增，官方说是调试用
  null: onRenderTracked, // vue3调试用的钩子，对响应式变量和方法进行状态跟踪，只要页面update，就会激活它生成一个event对象，可以通过event对象调试
  null: onRenderTriggered, // vue3调试用的钩子，跟踪发生变化的值，新值和旧值都展示出来，进行针对性调试。
}
// vue3语法eg:
onRenderTriggered((e) => {
    console.log(e)
})

二、父子组件生命周期顺序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if(!keepAlive)
{
  // 父组件走到beforeMount/beforeUpdate的时候，会先将子组件的生命周期走完mounted，再继续走父组件的mounted/updated
	// 父子组件都销毁时，父组件走到beforeDestroy的时候，会先将子组件销毁，再继续销毁父组件
  parent-beforeCreate
  parent-created
  parent-beforeMount
    child-beforeCreate
    child-created
    child-beforeMount
    child-mounted
  parent-mounted
 	parent-beforeUpdate
  parent-updated
  parent-beforeDestroy
    child-beforeDestroy
    child-destroyed
  parent-destroyed
}
else if(keepAlive)
{
  // 用keep-alive包裹的组件，第一次beforeMount，mounted，activated，第二次beforeUpdate，deactivated(旧组件)，updated，activated
}

三、最后附官方图

vue生命周期