Vueライフサイクルの詳細な説明

ライフサイクルを理解する理由

Vue フレームワークを使用し、そのライフサイクルを理解することで、開発がよりスムーズになります。

Vue の簡単な構文さえ知っていれば、いくつかの対応するプロジェクトやアイデアを実装できますが、問題が発生した場合は、ライフサイクルを使用して問題を見つける必要があります。いくつかの要件がある場合でも、ライフサイクルを使用して、どこにこれを記述する必要があるかを判断することもできます。そのため、Vue のライフサイクルを理解する必要があります。

ライフサイクルとは

Vue インスタンスの作成から破棄までのプロセスがライフサイクルです。具体的には、作成からデータの初期化、テンプレートのコンパイル、Dom のマウント、レンダリング→更新→レンダリング、アンインストールなどの一連の処理になります。

さらに、Vue インスタンスは Vue フレームワークのエントリポイントであり、フロントエンドの ViewModel として理解できます。ページ内のビジネスロジック処理とデータモデルが含まれています。また、Vue インスタンスの生成、コンパイル、ハング、破棄のプロセス全体にわたって js 制御を実行するのに役立つ独自のライフサイクル関数フックもあります。
公式サイトに掲載されているライフサイクル図（中国語に翻訳）は次のとおりです。

ここに画像の説明を挿入

ライフサイクルフック関数

ライフサイクルフックはライフサイクルイベントの別名です。ライフサイクルフック = ライフサイクル関数 = ライフサイクルイベント

主なライフサイクル機能のカテゴリは次のとおりです。

作成中のライフサイクル機能:
beforeCreate: インスタンスがメモリ内に作成されたばかりです。この時点では、データとメソッドの属性はまだ初期化されていません。
created: インスタンスがメモリ内に作成されました。データとメソッドが作成されました。テンプレートはまだコンパイルされていません。
beforeMount: テンプレートはコンパイルされていますが、まだページにマウントされていません
マウント済み: この時点で、コンパイルされたテンプレートは、表示用にページで指定されたコンテナにマウントされています。

実行時のライフサイクル機能:
beforeUpdate: この関数は、状態が更新される前に実行されます。この時点では、データ内の状態値は最新ですが、DOM ノードがまだ再レンダリングされていないため、インターフェイスに表示されるデータはまだ古いままです。
updated: この関数はインスタンスが更新された後に呼び出されます。この時点で、データ内のステータス値とインターフェースに表示されるデータが更新され、インターフェースが再レンダリングされました。

破壊中のライフサイクル機能:
beforeDestroy: インスタンスが破棄される前に呼び出されます。この段階では、インスタンスはまだ完全に使用可能です。
destroy: Vue インスタンスが破棄された後に呼び出されます。呼び出し後、Vue インスタンスによって指し示されるすべてのものがバインド解除され、すべてのイベントリスナーが削除され、すべての子インスタンスが破棄されます。

作成され、マウントされた

ライフサイクルフック関数の中で、最もよく使用されるのは、おそらく created と mount です。

created: テンプレートが HTML にレンダリングされる前に呼び出され、通常は特定の属性値を初期化してからビューにレンダリングします。主な用途: データの呼び出し、メソッドの呼び出し、非同期関数の呼び出し
マウント: テンプレートが HTML にレンダリングされた後 (通常はページが初期化された後) に呼び出され、その後 HTML DOM ノードに対していくつかの必要な操作が実行されます。

作成時はビュー内のHTMLはレンダリングされていないので、この時点でHTMLのDOMノードを直接操作すると、該当する要素が絶対に見つかりません。マウント時はこの時点でHTMLがレンダリングされているため、DOMノードを直接操作することができます。

実際、この 2 つは比較的理解しやすいです。通常、create の方が頻繁に使用され、mounted は通常、プラグインまたはコンポーネントを使用するときに実行されます。たとえば、chart.js プラグインを使用する場合: var ctx = document.getElementById(ID); 通常はこの手順があります。これをコンポーネントに書き込むと、create でチャートの初期化構成を実行できないことがわかります。続行するには、html がレンダリングされるまで待つ必要があります。この場合、mounted が唯一の選択肢です。

フックの実用的な使い方

1. 非同期関数

ここではタイマーを使って非同期関数を実行します

<div id="アプリ">
    <ul>
        <li v-for="(item,index) of list" key="index">{{item}}</li>
    </ul>
</div>

<script type="text/javascript">
    var アプリ = 新しい Vue({
        el:'#app',
        データ：{
            リスト:['aaaaaaaa','bbbbbbbb','cccccccc']
        },
        作成された:関数(){
            consoloe.log('非同期で作成されました: aaaaa');
            //非同期データ取得 // 非同期なので、Ajaxデータ取得setTimeout(()=>{と同じです
                this.list=['111','222','333','444'],
                console.log('非同期で作成されました:', document.getElementsByTagName('li').length);
            },0)
        },
        マウント: 関数 () {
            console.log('マウントされました:',document.getElementsByTagName('li').length);
        },
        更新: 関数 () {
            console.log('更新日時:',document.getElementsByTagName('li').length)
        },
    })
</スクリプト>

結果は次のとおりです。

作成: aaaaaaaa
マウント: 3
作成された非同期関数: 3
更新: 4

説明する：

作成されたフックに非同期関数が追加されているため、関数の実行順序は次のようになることがわかります。

作成フック、マウントフック、非同期関数、更新フック（イベントキューの原則によれば、更新された後にのみ、li は実際に 4 つの DOM としてレンダリングされるため、非同期関数で取得される li の数は、変更されていない li の数と同じです）。

mount は Vue のデータに初期値を設定して DOM をレンダリングし、非同期関数内でリストデータを変更しているため、mounted によって取得される li の数は 3 になります。

更新関数は、データビューにバインドされたデータが変更される限りトリガーされるため、最後に実行されます。

これは、更新関数内で直接操作できることを意味しますか? 実際のところ、そうではありません。更新関数は Vue 内のすべてのデータ変更を対象としており、他のデータ変更も発生する可能性があるからです。

たとえば、次の例をご覧ください。

// 非同期関数を使用してリストを2回変更すると、更新が2回トリガーされることがわかります。created: function() {
        //非同期データ取得 // 非同期なので、Ajaxデータ取得setTimeout(()=>{と同じです
             this.list=['111','222','333','444'],
             console.log('非同期で作成されました:', document.getElementsByTagName('li').length);
        },0)
        タイムアウトを設定します(()=>{
             this.list=['ハッピーキャンプ', 'ダウン・トゥ・アース', '300033', '日々の進歩', '一生懸命勉強'],
             console.log('非同期で作成されました:', document.getElementsByTagName('li').length);
        },1000)
},
マウント: 関数 () {
        console.log('マウントされました:',document.getElementsByTagName('li').length);
},
更新: 関数 () {
        console.log('更新日時:',document.getElementsByTagName('li').length)
},

結果は次のとおりです。

ここに画像の説明を挿入

2. Vue.nextTickは非同期関数の結果に対して動作します

データを変更したいときは、それぞれ独自のメソッドをトリガーします

作成された:関数(){
// 非同期データ取得 // 非同期なので、Ajax データ取得と同じです // データ変更後に Vue が DOM の更新を完了するまで待機するには、データ変更直後に Vue.nextTick(callback) を使用できます。この方法では、DOM の更新が完了した後にコールバック関数が呼び出されます。
    タイムアウトを設定します(()=>{
        this.list=['111','222','333','444'],
        console.log('非同期で作成されました:', document.getElementsByTagName('li').length);
        this.$nextTick(関数(){
            console.log("created$nextTick：",document.getElementsByTagName('li').length)
        });
    },0)
    タイムアウトを設定します(()=>{
        this.list=['ハッピーキャンプ', 'ダウン・トゥ・アース', '300033', '日々の進歩', '一生懸命勉強'],
        console.log('非同期で作成されました:', document.getElementsByTagName('li').length);
        this.$nextTick(関数(){
            console.log("created$nextTick：",document.getElementsByTagName('li').length)
        });
    },1000)
},
マウント: 関数 () {
    console.log('マウントされました:',document.getElementsByTagName('li').length);
},
更新: 関数 () {
  console.log('更新日時:',document.getElementsByTagName('li').length)
},

結果は次のとおりです。

$nextTickを通じて、非同期関数の結果に対して独自の操作を実行できることがわかります。

ここに画像の説明を挿入