【フロントエンド】Vueライフサイクル機能（詳細説明＋中国語図）

1. ライフサイクルとは何ですか

1. 意味

• ライフサイクル：vueインスタンスの作成からvueインスタンスがエクスタシーになるまでの過程

2. 理解する

• vueインスタンスプロセスの作成と破棄のように人間の一生は生まれてから死ぬまで。これらの大きな経験の中で、つまり特別な時点で私たちは何ができるでしょうか
• vue の寿命では、vue コンポーネントが作成されてから破棄されるまでの間に、いくつかの特別なコンポーネントも確立されます。ある時点、開発者が実装するのに便利なように、特定の時間特定の時間に vue を実行する具体的なことをする。「ライフサイクルフック機能」と呼ばれる方法で設定します。vue では、vue の有効期間は 8 つのライフサイクル フック関数によって支配されます。
• コールバック関数としても理解できます。周期関数を記述すると、Vue は指定された時点でこの関数を自動的に実行します。

フック機能: ユーザーの介入なしにシステムがさまざまな段階で自動的に実行する機能として簡単に理解できます。

2. ライフサイクルの定義（公式サイト）

1、ビュー2

Vue2のライフサイクル

2、ビュー3

Vue3のライフサイクル

3. ライフサイクル図

1. Vue2 ライフサイクル図

2. Vue3 ライフサイクル図

4. Vue のライフサイクル

主要な Vue ライフサイクル イベントは、イベントの前後で呼び出される 2 つのフックに分割されており、Vue アプリケーションには 4 つのメイン イベント (8 フック) があります。

● Create – コンポーネントが作成されるときに実行します
● Mount – DOM がマウントされるときに実行します
Update – 応答データが変更されたときに実行します
Destroy – 要素が破棄される直前に実行します

五、Vue2 ライフサイクルと Vue3 ライフサイクルの違い

6 つの Vue ライフサイクルの主要な段階と 8 つのサイクル関数

1、オプションAPIと合成API

[オプション API] では、ライフサイクル フックは vue インスタンスで公開されるオプションであり、呼び出して使用するだけで済みます。
[コンポジション API] では、使用する前にライフサイクル フックをプロジェクトに導入する必要があります

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

組み合わせ API では、setup() メソッドを使用して beforeCreate と created を置き換えると、これら 2 つのライフサイクルのメソッドが setup() で実行されます。

2. 作成フェーズ (関連プロパティの初期化): beforeCreate()、created()

• 作成前
• 注: 現時点では、data 内のデータは取得できません。this.$data得たものは未定義
• 作成した

2. マウント前の段階: beforeMount()、onBeforeMount()

1. コンポーネント DOM が実際にレンダリングされる前に呼び出されます。この時点では、ルート要素はまだありません。オプション API では、this.$data を使用してアクセスできます。コンポジション API では、ルート要素で ref を使用する必要があります。アクセスしたい

import { ref, onBeforeMount } from "vue";

  export default {
    setup() {
      console.log("setup,创建前后")
      const count = ref({
        str: '你好',
        number: 123
      })

      onBeforeMount(() => {
        console.log("onBeforeMount -- composition API", "挂载前",count.value.str)
      })

      return {
        count,
      }
    },

    data(){
      return{
        number: 123
      }
    },
    beforeMount() {
      console.log("beforeMount -- options API,挂载前",this.$data.number)
    },

3. ポストマウントステージ:mounted()、onMounted()

1. Mounted()、onMounted() [これはページがロードされるときです]
2. 注: デフォルトでは、コンポーネントのライフサイクルで 1 回だけトリガーされます。

import { ref, onMounted } from "vue";

  export default {
    setup() {
      console.log("setup,创建前后")
      const count = ref({
        str: '你好',
        number: 123
      })

      onMounted(() => {
        console.log("onMounted -- composition API", "挂载前",count.value.str)
      })

      return {
        count,
      }
    },

    data(){
      return{
        number: 123
      }
    },
    mounted() {
      console.log("mounted -- options API,挂载前",this.$data.number)
    },

4. 更新フェーズ (要素またはコンポーネントの変更操作): beforeUpdate()、updated()、onBeforeUpdate()、onUpdated()

1. データが更新されるときに呼び出されます。DOM が更新された後、updated() メソッドと onUpdated() メソッドが呼び出されます。
2. 再トリガー可能

<template>
  <div>
    <h1>Hello World</h1>
    {
   
   { count.str }}
    <button @click="changeStr">修改str的按钮</button>
  </div>
  <hr />
  <div>
    <h1>Hello World</h1>
    {
   
   { this.$data.number }}
    <button @click="changeNumber">修改number的按钮</button>
  </div>
</template>

<script>
  import {
      
       ref, onBeforeUpdate, onUpdated } from "vue";

  export default {
      
      
    //Vue3写法
    setup() {
      
      
      console.log("setup,创建前后")
      const count = ref({
      
      
        str: '你好',
        number: 123
      })
      onBeforeUpdate(() => {
      
      
        console.log("onBeforeUpdate -- composition API", "更新前")
      })
      onUpdated(() => {
      
      
        console.log("onUpdated -- composition API", "更新后",count.value.str)
      })

      function changeStr() {
      
      
        count.value.str = "已修改"
      }

      return {
      
      
        count,
        changeStr
      }
    },

    //Vue2写法
    data(){
      
      
      return{
      
      
        number: 123
      }
    },
    methods: {
      
      
      changeNumber() {
      
      
        this.$data.number = 456
      }
    },

    beforeUpdate() {
      
      
      console.log("beforeUpdate -- options API,更新前")
    },
    updated() {
      
      
      console.log("updated -- options API,更新后",this.$data.number)
    },
  }
</script>

5. 破棄フェーズ (関連属性の破棄): beforeUnmount() と onBeforeUnmounted()、unmounted() と onUnmounted()

それはいつトリガーされますか? : ページを閉じます (ブラウザではなく)

<script>
import {
      
       ref, onBeforeUnmount, onUnmounted } from "vue";

export default {
      
      
    setup() {
      
      
        onBeforeUnmount(() => {
      
      
            console.log("onBeforeUnmount -- composition API", "销毁前")
        })
        onUnmounted(() => {
      
      
            console.log("onUnmounted -- composition API", "销毁后")
        })
    },


    beforeUnmount() {
      
      
        console.log("beforeUnmount -- options API,销毁前")
    },
    unmounted() {
      
      
        console.log("unmounted -- options API,销毁后")
    }
}
</script>

7. 面接での質問

1. 一般的に使用される vue のライフサイクルは何ですか?

①. 要点

4ステージ、8周期関数

2. コンポーネント間に親子関係がある場合、親コンポーネント (A) と子コンポーネント (B) のライフサイクルはどのような順序で実行されますか?

①、思考回路

• コンポーネントには 8 つの共通サイクルがあります: 作成 2、マウント 2、更新 2、破棄 2
• B コンポーネントには 8 つの共通サイクルがあります: 作成 2、マウント 2、更新 2、破棄 2

②、答え

• 8 サイクルを 3 つのフェーズ (1-4、5-6、7-8) に分割します。
• レンダリングステージ: 親1 → 親2 → 親3 → 子1 → 子2 → 子3 → 子4 → 親4
• 更新フェーズ: 親 5 → 子 5 → 子 6 → 親 6
• 更新フェーズ: 親 5 → 子 5 → 子 6 → 親 6