这是我参与更文挑战的第3天，活动详情查看更文挑战

前言：

vue2生命周期相信学过vue的小伙伴都是很了解的在这里就不再赘述，记不得的小伙伴可以上官网复习一下
下面着重学习一下vue3相比于vue2生命周期的变化。

Vue2.的生命周期与Vue3.的生命周期对比图

vue2生命周期图

vue3生命周期图

vue3生命周期详细列表

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

注：使用<keep-alive>组件会将数据保留在内存中，比如我们不想每次看到一个页面都重新加载数据，就可以使用<keep-alive>组件解决。

钩子函数的使用

Vue3 生命周期在调用前需要先进行引入,暂时演示前五个生命周期。

import {
  reactive,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
} from "vue";
复制代码

setup 这个函数是在beforeCreate和created之前运行的,所以可以用它来代替这两个钩子函数。

为了看出钩子函数执行的时机，在setup()函数里，编写了下面的代码：

const app = {
  name: "App",
  setup() {
    console.log("1-开始创建组件-----setup()");
    const data: DataProps = reactive({
      girls: ["张三", "李四", "王五"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });
    onBeforeMount(() => {
      console.log("2-组件挂载到页面之前执行-----onBeforeMount()");
    });

    onMounted(() => {
      console.log("3-组件挂载到页面之后执行-----onMounted()");
    });
    onBeforeUpdate(() => {
      console.log("4-组件更新之前-----onBeforeUpdate()");
    });

    onUpdated(() => {
      console.log("5-组件更新之后-----onUpdated()");
    });

    const refData = toRefs(data);

    return {
      ...refData,
    };
  },
};
export default app;
复制代码

写完后可以到浏览器看一下效果

1 – 开始创建组件—- – setup();
2 – 组件挂载到页面之前执行—- – onBeforeMount();
3 – 组件挂载到页面之后执行—- – onMounted();
4 – 组件更新之前—- – onBeforeUpdate();
5 – 组件更新之后—- – onUpdated();

vue2的生命周期函数同样可以在vue3中使用

在setup()函数之后编写Vue2的生命周期函数，代码如下：

beforeCreate() {
  console.log("1-组件创建之前-----beforeCreate()");
},
beforeMount() {
  console.log("2-组件挂载到页面之前执行-----BeforeMount()");
},
mounted() {
  console.log("3-组件挂载到页面之后执行-----Mounted()");
},
beforeUpdate() {
  console.log("4-组件更新之前-----BeforeUpdate()");
},
updated() {
  console.log("5-组件更新之后-----Updated()");
},
复制代码

这时候可以看到，原来的生命周期也是完全可以使用。

onRenderTracked()和 onRenderTriggered()钩子函数的使用

这两个钩子函数是Vue3版本新加的两个钩子函数

对新旧钩子函数的使用原则
Vue 官方的文档里，明确指出了。如果你使用 Vue3，请尽量使用新的生命周期钩子函数，也就是在setup()函数中带on的这些钩子函数。

onRenderTracked 状态跟踪

onRenderTracked直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。

使用onRenderTracked同样要使用import进行引入。

import { .... ,onRenderTracked,} from "vue";
复制代码

引用后就可以在setup()函数中进行引用了。

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

复制代码

写完后可以到终端中启动测试服务，然后看一下效果，在组件没有更新的时候onRenderTracked是不会执行的，组件更新时，它会跟组里边每个值和方法的变化。

onRenderTriggered 状态触发

onRenderTriggered直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。

onRenderTracked会将每个值都进行跟踪，onRenderTriggered只精确跟踪发生变化的值，进行针对性调试。使用它同样要先用import进行引入

import { .... ,onRenderTriggered,} from "vue";
复制代码

在使用onRenderTriggered前，记得注释相应的onRenderTracked代码，这样看起来会直观很多。 然后把onRenderTriggered()函数，写在setup()函数里边。

onRenderTriggered((event) => {
  console.log("状态触发组件--------------->");
  console.log(event);
});
复制代码

对 event 对象属性的详细介绍：

• key 那边变量发生了变化
• newValue 更新后变量的值

– oldValue 更新前变量的值

• target 目前页面中的响应变量和函数

是不是觉得和watch比较的相像

最后

合理正确的使用狗子函数可以让我们在合适的时候去处理合适的事务，对于代码调试也有很大的帮助。