VIP30/v3_project/8_vue3的生命周期/components/Child.vue

<template>
  <h2>子组件</h2>
  <h3>msg: {{ msg }}</h3>
  <button @click="update">更新</button>
</template>

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

export default defineComponent({
  name: "Child",
  //vue2生命周期 钩子函数
  beforeCreate() {
    console.log("2.0 beforeCreate");
  },
  created() {
    console.log("2.0 created");
  },
  beforeMount() {
    console.log("2.0 beforeMount");
  },
  mounted() {
    console.log("2.0 mounted");
  },
  beforeUpdate() {
    console.log("2.0 beforeUpdate");
  },
  updated() {
    console.log("2.0 updated");
  },
  // beforeDestroy(){
  //   console.log('2.0 beforeDestroy')
  // },
  // destroyed(){
  //   console.log('2.0 destroyed')
  // },
  beforeUnmount() {
    console.log("2.0 beforeUnmount");
  },
  unmounted() {
    console.log("2.0 unmounted");
  },
  setup() {
    //vue3生命周期函数
    console.log("3.0 setup");

    const msg = ref("abc");
    const update = () => {
      msg.value += "!";
    };
    onBeforeMount(() => {
      console.log("3.0 onBeforeMount");
    });
    onMounted(() => {
      console.log("3.0 onMounted");
    });
    onBeforeUpdate(() => {
      console.log("3.0 onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("3.0 onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("3.0 onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("3.0 onUnmounted");
    });
    return {
      msg,
      update,
    };
  },
});
</script>

<style scoped>
</style>