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 接続クエリを知っていますか?

推薦する

Vue パッケージ化後の空白ページの解決策

1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...

25 個の CSS フレームワーク、ツール、ソフトウェア、テンプレートを共有

スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...

背景画像の配置におけるbackground-position属性の自己理解

最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...

CSS3 @mediaの基本的な使い方のまとめ

//文法: @media mediatype and | not | only (メディア機能) ...

MySQL 8.0 パスワード有効期限ポリシーの詳細な説明

MySQL 8.0.16 以降では、パスワードの有効期限ポリシーを設定できます。今日は、この小さな知...

Vue の this.$store.state.xx.xx に関する簡単な説明

目次これを Vue.$store.state.xx.xxストアからデータを取得する私のプロジェクトフ...

CSS レスポンシブ レイアウト システムの例コード

レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...

ウェブページでグレーまたはブラックモードを実現するための CSS3 フィルターコード

フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...

Mysqlチュートリアルでのグループランキングの実装例の詳細な説明

目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...

MySQL の group by と having の詳細な説明

GROUP BY 構文を使用すると、指定されたデータ列の各メンバーに従ってクエリ結果をグループ化して...

HTML でよく使用されるエスケープ文字の概要

HTML でよく使用されるエスケープ文字をまとめると次のようになります。 &nbsp; 改行...

MySQL 独立インデックスと共同インデックスの選択

複数列のインデックスについては、理解が不足していることがよくあります。よくある間違いは、多数の列に独...

Vue コンポーネント ライブラリ ElementUI はテーブル読み込みツリー データのチュートリアルを実装します

ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体...

MySQL の自動増分 ID に関するいくつかの小さな問題の要約

以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...

MySQL 操作: JSON データ型の操作

前回の記事では、MySQL データ保存手順パラメータの詳細な例を紹介しました。今日は、JSON デー...