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

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を通じて、非同期関数の結果に対して独自の操作を実行できることがわかります。

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue ライフサイクルにおけるコンポーネント化をご存知ですか?
  • Vueのライフサイクルを見てみましょう
  • Vueのライフサイクルとデータ共有の詳細な説明
  • Vueのライフサイクルについて学びましょう
  • Vueのライフサイクルに関するよくある話
  • Vueのライフサイクルについての簡単な説明
  • Vueライフサイクル機能の詳細な説明
  • Vueのライフサイクルについて詳しく説明します
  • Vueのライフサイクルを整理する
  • Vue のライフサイクルの紹介

<<:  Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

>>:  どのような種類の MYSQL 接続クエリを知っていますか?

推薦する

Dockerを使用してシンプルなJava開発およびコンパイル環境を構築する方法の詳細な説明

Java 言語には多くのバージョンがあります。一般的に使用されている Java 8 に加えて、一部の...

CSS3 を使用してピカチュウのアニメーション壁紙を作成する例

文章さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでな...

TypeScript における型保護の詳細な説明

目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...

時間に基づいて日付をクエリするためのMySQL最適化テクニック

たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...

MySQLのクラスタモードでのgalera-clusterのデプロイメントの詳細説明

目次1: galera-clusterの紹介2. galera-clusterの仕組み3: Mari...

HTML の隠しフィールドの紹介と例

基本的な構文: <input type="hidden" name=&qu...

数百万のデータボリュームに対する MySQL ページングクエリ方法とその最適化の提案

データベース SQL の最適化はよくある問題です。何百万ものデータ ボリュームに対してページング ク...

シンプルなID生成戦略: MySQLテーブルからグローバルに一意のIDを生成する実装

グローバル ID を生成する方法は多数あります。ここでは簡単な解決策を紹介します。MySQL の自動...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

マウスで画像を動かすJavaScript

この記事では、マウスの動きに追従する画像を実現するためのJavaScriptの具体的なコードを参考ま...

WeChatアプレットが左右連携を実現

この記事では、WeChatアプレットの左右連動を実現するための具体的なコードを参考までに紹介します。...

Linuxの読み取りコマンドの使用

1. コマンドの紹介read コマンドは、シェルの組み込みコマンドで、標準入力または -u オプショ...

Docker+Nginx を使ってシングルページアプリケーションをデプロイする

開発から導入まで自分で行うシングルページアプリケーションを開発する場合、ビルドを実行した後 npm ...

Linux での UDP について学ぶ

目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...

Vue のプラグインとコンポーネントの違いと使い方のまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...