vue3的生命周期钩子与vue2生命周期对比理解

生命周期更新

对于vue的生命周期想必大家都非熟悉,在项目中非常常用

生命周期:伴随着生命周期，给用户使用的函数，操控生命周期，主要是操控钩子函数。

vue3的生命周期

• setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
• onBeforeMount() : 组件挂载到节点上之前执行的函数。
• onMounted() : 组件挂载完成后执行的函数。
• onBeforeUpdate(): 组件更新之前执行的函数。
• onUpdated(): 组件更新完成之后执行的函数。
• onBeforeUnmount(): 组件卸载之前执行的函数。
• onUnmounted(): 组件卸载完成后执行的函数
• onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
• onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
• onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

vue3生命周期与vue2生命周期对比理解

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

vue3的生命周期函数在使用前需要先引入

import {
  reactive,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
} from "vue";

setup() {
  onMounted(() => {
    console.log('mounted')
  })
  onUpdated(() => {
    console.log('updated')
  })
  onRenderTriggered((event) => {
    console.log(event)
  })
}

onRenderTracked 和onRenderTriggered 钩子函数的使用

onRenderTracked =>状态跟踪,他会跟踪页面上所有响应式变量和方法的状态,也就是我们return出去的值,
只要页面有update的情况,他就会跟踪,然后生成一个event对象,我们可以通过event对象来查找程序所存在的问题
同样需要先引入

import { .... ,onRenderTracked,} from "vue";

再在setup函数中使用

onRenderTracked((event) => {
  console.log("状态跟踪组件----------->");
  console.log(event);
});

onRenderTriggered=> 状态触发,不会跟踪每一个值,而是给你变化值的信息,并且新值和旧值都会明确的展示出来
如果把onRenderTracked是每个值都追踪,而onRenderTriggered是精准追踪,进行针对性调试
使用时我们同样需要导入

import { .... ,onRenderTriggered,} from "vue";
onRenderTriggered((event) => {
  console.log("状态触发组件--------------->");
  console.log(event);
});
- key 那边变量发生了变化
- newValue 更新后变量的值
- oldValue 更新前变量的值
- target 目前页面中的响应变量和函数

这样看来onRenderTriggered跟watch有一丝丝像watch