vue3-(生命周期)

<template>
  <div>{{ obj.name }}</div>
  <div>{{ obj.age }}</div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue';
let obj = reactive({
  name: '张三',
  age: 18
});
onBeforeMount(() => {
  console.log('onBeforeMount:在dom渲染之前调用，');
});
onMounted(() => {
  console.log('onMounted:dom渲染之后第一次调用，可以获取到dom元素');
});
onBeforeUpdate(() => {
  console.log('数据更新之前调用');
});
onUpdated(() => {
  console.log('数据更新之后调用');
});
onBeforeUnmount(() => {
  console.log('在卸载组件实例之前调用。');
});
onUnmounted(() => {
  console.log('在卸载组件实例之后调用。');
});
let msg = ref(100);
</script>