对比vue2和vue3的生命周期

Vue.js 2.x 生命周期钩子：

1. beforeCreate：

   • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
   • 此时实例上的属性和方法都未初始化。

2. created：

   • 实例已经创建完成，属性和方法已经被加入到实例中。
   • 在这个阶段，可以访问数据、可以进行 Ajax 请求等操作。

3. beforeMount：

   • 在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted：

   • el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。
   • 实例化过程完成，可以在这里操作 DOM，进行数据请求。

5. beforeUpdate：

   • 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   • 可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

6. updated：

   • 虚拟 DOM 重新渲染和打补丁之后调用。
   • 在这一阶段，组件 DOM 已经更新，可以执行依赖于 DOM 的操作。

7. beforeDestroy：

   • 实例销毁之前调用。在这一步，实例仍然完全可用。
   • 可以在这里做一些清理工作，比如清除定时器。

8. destroyed：

   • 实例销毁后调用。
   • 在这一步，只剩下了被销毁的实例和其它关联的组件，可以进行一些最后的清理工作。

errorCaptured 是全局错误捕获钩子，可以用于捕获任何子孙组件中的错误。在子组件中发生错误时，这个钩子会被调用，允许你处理错误或者阻止错误继续冒泡。但是，它只能捕获到由模板或渲染函数引起的错误，无法捕获到其他类型的错误，比如异步操作中的错误。

与 vue2.x 版本生命周期 相对应的 vue3.x组合式 API

· beforeCreate -> 使用 setup()

· created -> 使用 setup()

· beforeMount -> onBeforeMount

· mounted -> onMounted

· beforeUpdate -> onBeforeUpdate

· updated -> onUpdated

· beforeDestroy -> onBeforeUnmount

· destroyed -> onUnmounted

· errorCaptured -> onErrorCaptured

在 Vue.js 3.x 中，onErrorCaptured 是替代 errorCaptured 的钩子。与 errorCaptured 不同，onErrorCaptured 可以捕获到所有类型的错误，包括异步操作中的错误。同样，它也允许你处理错误或阻止错误继续冒泡。

vue3.x新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

· onRenderTracked

· onRenderTriggered

keep-alive组件中多出的两个生命周期：

缓存组件再次进入不走onMounted 只走onActicated生命周期

· onActicated

从缓存组件离开但未销毁 走onDeactivated生命周期

· onDeactivated

<template>
  <div style="font-size: 14px;">
    <h2>msg: {{ msg }}</h2>
    <hr />
    <button @click="handleUpdate">更新</button>
  </div>
</template>

<script lang="ts">
import {
  ref,
  onMounted,
  onUpdated,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
} from "vue";
// 这里是将vue2 和 vue3 的生命周期进行对比
export default {
  beforeCreate() {
    console.log("beforeCreate()");
  },

  created() {
    console.log("created");
  },

  beforeMount() {
    console.log("beforeMount");
  },

  mounted() {
    console.log("mounted");
  },

  beforeUpdate() {
    console.log("beforeUpdate");
  },

  updated() {
    console.log("updated");
  },

  beforeUnmount() {
    console.log("beforeUnmount");
  },

  unmounted() {
    console.log("unmounted");
  },

  setup() {
    const msg = ref("测试生命周期");

    const handleUpdate = () => {
      msg.value += "--";
    };

    onBeforeMount(() => {
      console.log("--onBeforeMount");
    });

    onMounted(() => {
      console.log("--onMounted");
    });

    onBeforeUpdate(() => {
      console.log("--onBeforeUpdate");
    });

    onUpdated(() => {
      console.log("--onUpdated");
    });

    onBeforeUnmount(() => {
      console.log("--onBeforeUnmount");
    });

    onUnmounted(() => {
      console.log("--onUnmounted");
    });

    return {
      msg,
      handleUpdate,
    };
  },
};
</script>

初始化页面效果：

点击更新后页面效果：