Vue 3 生命周期使用

写法1：

import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
} from "vue";
export default defineComponent({
  // beforeCreate和created是vue2的
  beforeCreate() {
    console.log("------beforeCreate-----");
  },
  created() {
    console.log("------created-----");
  },
  setup() {
    console.log("------setup-----");
    // vue3.x生命周期写在setup中
    onBeforeMount(() {
      console.log("------onBeforeMount-----");
    });
    onMounted(() {
      console.log("------onMounted-----");
    });
    // 调试哪些数据发生了变化
    onRenderTriggered((event) {
      console.log("------onRenderTriggered-----", event);
    });
  },
});

写法2：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script setup>
import { onMounted, onUpdated, onUnmounted, ref } from 'vue'
 
const message = ref('Hello World')
 
onMounted(() => {
  console.log('Component mounted')
})
 
onUpdated(() => {
  console.log('Component updated')
})
 
onUnmounted(() => {
  console.log('Component unmounted')
})
</script>