Vue 3.0 生命周期/钩子函数

让我们伴随着问题来学习。  

1.什么是生命周期？什么是钩子函数？

Vue的一个组件的诞生到消亡中，有着许多的过程。这些过程就是一个生命周期      

钩子函数是伴随着生命周期的，给用户使用的函数。想要控制生命周期，我们就可以从控制钩子函数入手。

不同的生命周期，类似于人们的出生少年中年老年，每个阶段都会做不同的事情，而我们用函数来封装我们的一生，那就是 

born("上幼儿园");

teenager("读书上学参加高考");

middleAged("找工作，报答父母");

oldAged("养老,下棋");

 对于vue，它为我们开放了对应的一个个函数供我们使用。我们就可以控制组件在不同的生命周期做不同的事情。

2.Vue3都有哪些生命周期？

Vue3 的生命周期比较多，我们需要一个个给大家讲。

• setup()是在beforeCreate和created之前运行的，所以可以用setup代替这两个钩子函数。
• onBeforeMount() : 组件挂载到节点上之前执行的函数。
• onMounted() : 组件挂载完成后执行的函数。
• onBeforeUpdate(): 组件更新之前执行的函数。
• onUpdated(): 组件更新完成之后执行的函数。
• onBeforeUnmount(): 组件卸载之前执行的函数。
• onUnmounted(): 组件卸载完成后执行的函数
• onActivated(): 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
• onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
• onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）。

3.如何使用钩子函数？

我们需要导入一下

import { onMounted, onUpdated, onUnmounted } from 'vue'

让我们写一个模板演示一下

import { onMounted, onUpdated, onUnmounted } from 'vue'
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();

4.可以在Vue3版本使用Vue2.x的生命周期函数吗？

       Of course.

        2.x的生命周期：

        beforeCreate()

        beforeMount()

        mounted()

        beforeUpdate()

        updated()

5.Vue3.0和2.x生命周期函数（钩子函数）都有哪些变化？

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

---

6.总结你都学了哪些内容？

        1.生命周期的定义

        2.生命周期的用法，必须导包

        3.Vue3更新的内容，差不多就是3版本都加上了on, 相比2.x版

        本, beforeCreate和created都变成了setup()。

        4.需要大体记忆：

                onMounted  组件挂在在页面之后进行

                onBeforeUpdate 组件更新之前进行

                onUpdated 组件更新成功之后进行