vue3 生命周期

vue3 的生命周期与 vue2 是不太相同的，特此整理：

<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onUnmounted,
  onUpdated,
  onMounted,
  ref,
  onActivated,
  onDeactivated,
} from "vue";

defineProps<{ msg: string }>();

const count = ref(0);
const name = ref("彭");
let update = () => {
  console.log("update");
  name.value = "点击了";
};

function table() {
  const gander = "男";
  return {
    gander,
  };
}
let table1 = table();

onBeforeMount(() => {
  console.log("onBeforeMount");
  console.log(name.value);
  console.log(document.getElementById("count"));
});
onMounted(() => {
  console.log("onMounted");
  console.log(name.value);
  console.log(document.getElementById("count"));
});

onActivated(() => {
  console.log("onActivated");
});

onDeactivated(() => {
  console.log("onDeactivated");
});

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

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

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

onUnmounted(() => {
  console.log("onUnmounted");
});
</script>

<template>
  <h1>{{ msg }}</h1>
  <h2 @click="update">{{ name }}</h2>
  <h4 id="count">{{ count }}</h4>
  <h4>{{ table1.gander }}</h4>
</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>

通过 vite 构建的 vue3 项目，ts版本；

onBeforeMount onMounted onBeforUpdate onUpdated onUnMount onUnMounted 

个人认为，在 vue2 中 created 阶段进行的接口请求，目前只能放在 vue3 中的 onMounted 阶段了

我去看下官方文档是怎么解释的。

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

个人理解：只要放在 setup 函数中第一行执行，其实就是 vue2 中的 created 阶段！