vue3.0生命周期挂鈎

<template>
  <div id="home">
    <div>{{ readersNumber }}</div>
    <div>{{ data.name }}</div>
    <div>{{ name }}</div>
    <button @click="change">改變</button>
  </div>
</template>

<script>
import {
  ref, //ref() 函數用來根據給定的值建立一個(響應式的資料對象)，傳入的為基本資料類型，例如字元串、數字、boolean 等,傳回值是一個對象，這個對象上隻包含一個 value 屬性
  reactive, //傳入的為引用類型，例如數組、對象等(響應式的資料對象)
  toRefs, //toRefs() 函數可以将 reactive() 建立出來的(響應式對象)，轉換為普通的對象，相當于變成一個個的ref()
  onBeforeMount, //元件挂在到頁面之前執行
  onMounted, //元件挂在到頁面之後執行
  onBeforeUpdate, //在元件更新之前執行
  onUpdated, //在元件更新之後執行
  onBeforeUnmount, //在元件解除安裝之前執行
  onUnmounted, //在元件解除安裝之後執行
  onActivated, 被激活時執行 ;被包含在<keep-alive>中的元件，會多出兩個生命周期鈎子函數(onActivated,onDeactivated)。
  onDeactivated, //在元件切換中老元件消失的時候執行(比如從 A 元件，切換到 B 元件，A 元件消失時執行)
  onRenderTriggered, //狀态觸發,它不會跟蹤每一個值，而是給你變化值的資訊，并且新值和舊值都會給你明确的展示出來
  onRenderTracked, //狀态跟蹤，它會跟蹤頁面上所有響應式變量和方法的狀态，也就是我們用return傳回去的值，他都會跟蹤。隻要頁面有update的情況，他就會跟蹤，然後生成一個event對象，我們通過event對象來查找程式的問題所在
  // onErrorCaptured,//當捕獲一個來自子孫元件的異常時激活鈎子函數
} from "vue";
export default {
  name: "Home",
  components:{
  },
  setup() {
    const readersNumber = ref(0);
    const data = reactive({
      name: "張三",
      obj: ["王二麻子", "李白", "王五", "小秋秋"],
      arr: [0, 1, 2, 3],
      fn: () => {
        return 100;
      },
    });
    const reData = toRefs(data);
    function change() {
      readersNumber.value += 1;
      if (readersNumber.value > 3) readersNumber.value = 0;
      data.name = data.obj[readersNumber.value];
    }
    console.log("1...setup()元件建立之中");
    onBeforeMount(() => {
      console.log("2...onBeforeMount()元件挂在到頁面之前執行");
    });

    onMounted(() => {
      console.log("3...onMounted()元件挂在到頁面之後執行");
    });

    onBeforeUpdate(() => {
      console.log("4...onBeforeUpdate()在元件更新之前執行");
    });

    onUpdated(() => {
      console.log("5...onUpdated()在元件更新之後執行");
    });

    onBeforeUnmount(() => {
      console.log("6...onBeforeUnmount()在元件解除安裝之前執行");
    });

    onUnmounted(() => {
      console.log("7...onUnmounted()在元件解除安裝之後執行");
    });

    onActivated(() => {
      console.log("8...onActivated緩存激活");
    });
    onDeactivated(() => {
      console.log("9...onDeactivated()在元件切換中老元件消失的時候執行");
    });
    onRenderTriggered((event) => {
      console.log("10...onRenderTriggered跟蹤變化的下資訊，傳回新值和舊值", event);
    });
    onRenderTracked((event) => {
      console.log("11...onRenderTracked:跟蹤頁面上所有響應式變量和方法的狀态并且傳回新值", event);
    });
    return {
      readersNumber,
      data,
      ...reData,
      change
    };
  },
};
</script>