【Vue3】Vue3中的生命周期及先后次序

最新推荐文章于 2024-03-24 21:13:51 发布

敦厚的曹操

最新推荐文章于 2024-03-24 21:13:51 发布

阅读量1.5k

点赞数

分类专栏： 26.【Vue】文章标签： java 开发语言

本文链接：https://blog.csdn.net/dxnn520/article/details/126466547

版权

26.【Vue】专栏收录该内容

109 篇文章 7 订阅

订阅专栏

一、对比图

来源：【vue3系列】vue3之生命周期(带图)_xiaoLiang o的博客-CSDN博客_vue3生命周期图Vue3之生命周期主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)：创建 ---- 在组建创建时执行挂载 ---- DOM被挂载时执行更新 ---- 当响应数据被修改时执行销毁 ---- 在元素被销毁之前立即执行在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。import {onMountedhttps://blog.csdn.net/qq_42445025/article/details/121978510

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

beforeDestroy改名为 beforeUnmount

destroyed改名为 unmounted

Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate===>setup()

created=======>setup()

beforeMount ===>onBeforeMount

mounted=======>onMounted

beforeUpdate===>onBeforeUpdate

updated =======>onUpdated

beforeUnmount ==>onBeforeUnmount

unmounted =====>onUnmounted

<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
</template>
 
<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default {
  name: "Demo",
 
  setup() {
    console.log("---setup---");
    //数据
    let sum = ref(0);
 
    //通过组合式API的形式去使用生命周期钩子
    //#region
    onBeforeMount(() => {
      console.log("---onBeforeMount---");
    });
    onMounted(() => {
      console.log("---onMounted---");
    });
    onBeforeUpdate(() => {
      console.log("---onBeforeUpdate---");
    });
    onUpdated(() => {
      console.log("---onUpdated---");
    });
    onBeforeUnmount(() => {
      console.log("---onBeforeUnmount---");
    });
    onUnmounted(() => {
      console.log("---onUnmounted---");
    });
    //#endregion
    //返回一个对象（常用）
    return { sum };
  },
  //通过配置项的形式使用生命周期钩子
  //#region
  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---");
  },
  //#endregion
};
</script>