03. 生命周期

vue3和vue2的生命周期基本一样，只是做了一点点变动

1、beforeCreate和created这2个生命周期，整合到了setup

2、生命周期的名字做了以下修改：

3、同一个生命周期的函数可以写多个，执行顺序则是从上到下

onMounted(()=> {})
onMounted(()=> {})
onMounted(()=> {})

例子

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

onBeforeMount(() => {
  console.log("beforeMount");
});
onMounted(() => {
  console.log("mounted");
});
onBeforeUpdate(() => {
  console.log("beforeUpdate");
});
onUpdated(() => {
  console.log("updated");
});
onBeforeUnmount(() => {
  console.log("beforeDestroy");
});
onUnmounted(() => {
  console.log("destroyed");
});
</script>

tips：以前需要在beforeCreate和create做的逻辑，现在放到直接写就可以了。如 ：

<script setup>
    // 请求接口函数
    getList() {

    }
    getList() // 直接调用
</script>