Vueコンポーネントプログラミングのライフサイクルは、コンポーネントがさまざまな期間に実行できるさまざまな関数として理解できます。これらの関数は、フック関数とも呼ばれます。
フック機能にはライフサイクルが伴い、ライフサイクルを制御するためにユーザーに特別に公開されます。したがって、ライフサイクルを理解したいのであれば、フック機能を理解する必要があります。
Vue3.xでは、フック関数にいくつかの変更が加えられています。次のフレームワークの例を通して理解しましょう。

<template>
  <div>
    <button
      v-for="(item, index) in arr"
      v-bind:key="index"
      @click="selectOneFun(index)"
    >
      {
   
   { index }}:{
   
   { item }}
    </button>
  </div>
  <div>你选择了【{
   
   { selectOne }}】</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs } from "vue";

export default {
  name: "App",
  setup() {
    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

<style>
</style>

ここに画像の説明を挿入
ボタンをクリックしてコンポーネントを更新します

セットアップ（）

コンポーネントを作成する前に実行してください。

<script lang="ts">
// setup()不需要多余的import引入
import { ref, reactive, toRefs } from "vue";

export default {
  name: "App",
  setup() {
  
    console.log("1...setup()开始创建组件");
    
    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};

onBeforeMount（）

コンポーネントは、ページにぶら下がる前に実行されます。

<script lang="ts">
// 引入onBeforeMount 钩子
import { ref, reactive, toRefs, onBeforeMount } from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
	//调用onBeforeMount 
    onBeforeMount(() => {
      console.log("2...onBeforeMount()组件挂在到页面之前执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onMounted（）

コンポーネントは、ページにぶら下がった後に実行されます。

<script lang="ts">
// 引入onMounted 钩子
import { ref, reactive, toRefs, onMounted } from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
	//调用onMounted 
	onMounted(() => {
      console.log("3...onMounted()组件挂在到页面之后执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onBeforeUpdate（）

コンポーネントの更新前に実行します。

<script lang="ts">
// 引入onBeforeUpdate钩子
import { ref, reactive, toRefs, onBeforeUpdate} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
	//调用onBeforeUpdate
    onBeforeUpdate(() => {
      console.log("4...onBeforeUpdate()在组件更新之前执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onUpdated（）

コンポーネントの更新後に実行します。

<script lang="ts">
// 引入onUpdated钩子
import { ref, reactive, toRefs, onUpdated} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
	//调用onUpdated
    onUpdated(() => {
      console.log("5...onUpdated()在组件更新之后执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onBeforeUnmount（）

コンポーネントをアンインストールする前に実行してください。

<script lang="ts">
// 引入onBeforeMount 钩子
import { ref, reactive, toRefs, onBeforeUnmount} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
	//调用onBeforeUnmount
    onBeforeUnmount(() => {
      console.log("6...onBeforeUnmount()在组件卸载之前执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onUnmounted（）

コンポーネントがアンインストールされた後に実行します。

<script lang="ts">
// 引入onUnmounted钩子
import { ref, reactive, toRefs, onUnmounted} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
	//调用onUnmounted
    onUnmounted(() => {
      console.log("7...onUnmounted()在组件卸载之后执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

onDeactivate（）

コンポーネントの切り替え中に古いコンポーネントが消えたときに実行します。

<script lang="ts">
// 引入onDeactivated钩子
import { ref, reactive, toRefs, onDeactivated} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
	//调用onDeactivated
    onDeactivated(() => {
      console.log("8...onDeactivated()在组件切换中老组件消失的时候执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

上記のコードを組み合わせて簡単に実行します

<template>
  <div>
    <button
      v-for="(item, index) in arr"
      v-bind:key="index"
      @click="selectOneFun(index)"
    >
      {
   
   { index }}:{
   
   { item }}
    </button>
  </div>
  <div>你选择了【{
   
   { selectOne }}】</div>
</template>

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

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });

    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()在组件卸载之后执行");
    });

    onDeactivated(() => {
      console.log("8...onDeactivated()在组件切换中老组件消失的时候执行");
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

<style>
</style>

それを実行します

初期化
ボタンをクリックしてコンポーネントを更新します

参考資料：https：//www.bilibili.com/video/BV1L5411j7vj？p = 7

特別なフック関数onRenderTriggered

onRenderTriggered関数には、コンポーネントの状態を追跡し、これらの状態を保存するためのパラメーターを返す特別な関数があります。たとえば、コンポーネントの状態を更新する例を見てみましょう。

<script lang="ts">
// 引入onUpdated，onRenderTriggered钩子
import { ref, reactive, toRefs, onUpdated, onRenderTriggered} from "vue";

export default {
  name: "App",
  setup() {
    console.log("1...setup()开始创建组件");

    const data = reactive({
      arr: ["Yes", "NO"],
      selectOne: "",
      selectOneFun: (index: number) => {
        data.selectOne = data.arr[index];
      },
    });
	//调用onUpdated
    onUpdated(() => {
      console.log("5...onUpdated()在组件更新之后执行");
    });
	//调用onRenderTriggered
	onRenderTriggered((event) => {
      console.log("9...onRenderTriggered()状态跟踪钩子函数");
      console.log(event);
    });

    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

ボタンをクリックしてコンポーネントを更新すると、onRenderTriggered関数が最初に実行され、次にonUpdated関数が実行され、onRenderTriggered関数がステータスが更新されたコンポーネントの情報を含むオブジェクトを返すことがわかります。
ここに画像の説明を挿入

Vue3.xのライフサイクルとフック機能（部分的）

目次