Vueライフサイクルの紹介とフック機能コンポーネントの内部構造はフェーズごとに異なるため、通常はマウント フェーズでの Ajax データ取得など、特定のフックが特定の処理を実行します。 Vue インスタンスの作成からインスタンスの最終的な破棄までのプロセス全体を VUE ライフサイクルと呼びます。このライフサイクルでは、Vue インスタンスの作成から始まり、まず Vue インスタンスが作成され、次にデータが初期化され、テンプレートがコンパイルされ、DOM がマウントされ、DOM がレンダリングされ、オブジェクトのプロパティが更新され、DOM がレンダリングされ、バインディングが解除されて破棄されます。 VUEライフサイクルフックライフサイクル フックは、ライフサイクル時間、ライフサイクル関数とも呼ばれ、ライフサイクル フックは、vue ライフサイクルでトリガーされるさまざまなイベントです。これらのイベントはライフサイクル フックと呼ばれます。vue ライフサイクルでは、そのほとんどは作成、ハング、更新、破棄の 4 つのステージに分かれています。これらの 4 つのステージはそれぞれ 2 つのライフサイクル フックに対応しています。 1. 作成部分 (create) は、Vue インスタンスが初期化されるときです。簡単に言うと、この操作をコード var app = new Vue() で実行し、Vue ライフサイクルの作成フェーズに入ります。作成フェーズでは、beforeCreate と created という 2 つのプログラミング インターフェイスが提供されます。 両方のインターフェースは作成フェーズでトリガーされますが、2 つのインターフェースにはいくつかの違いがあります。beforeCreate は created よりも前にトリガーされます。つまり、vue インスタンスが初期化された後、データが読み取られる前にトリガーされます。この時点で data 内のデータが読み取られると、unfined がプロンプトされます。 created はインスタンスが作成された後に呼び出されます。この時点では、data 内のデータは書き込まれていますが、DOM はまだマウントされていないため、ページに関連付けられていません。ここでマウント段階に入ります。 2. マウントフェーズ (マウント):このフェーズでは、ページ内の DOM をインスタンス化された Vue オブジェクトにマウントします。簡単に言うと、el: '#dom' が実行されます。この段階では、beforemount と mount という 2 つのインターフェースもプログラムする必要があります。これら 2 つのインターフェースの主な違いは、DOM がインスタンス オブジェクトにマウントされるかどうかです。Beforemount はマウント前にトリガーされ、テンプレートのみが解析されます。このとき、マウントする必要がある DOM の innerHTML が出力されている場合は、データをレンダリングせずにテンプレートをそのまま出力します。マウント後、データ内のデータをページ上にレンダリングできるようになります。このフェーズの後に更新フェーズが続きます。 3. 更新フェーズ:このフェーズでは、ページ上のデータが最初の読み込み後に再度更新されます。また、beforeupdate と update の 2 つのインターフェースにも対応しています。これら 2 つのインターフェースの主な違いは、ページ DOM がレンダリングされるかどうかにあります。 data 内のデータを変更し、変更が完了した後に beforeupdate をトリガーすると、data 内の属性値は変更されていますが、ページの DOM はレンダリングされていません。更新はページ上のデータをレンダリングすることです。この時点で、Vue のライフサイクルは更新段階に達しています。通常の使用では、何度も更新段階に入り、ページ上のデータにさまざまな変更を加えることがよくあります。ただし、不要なイベントを閉じてメモリを解放するには、破棄フェーズが必要です。 Vue ライフサイクルの紹介上記の段階 コード監視フック機能の使用 <!DOCTYPE html> <html> <ヘッド> <タイトル></タイトル> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> </head> <本文> <div id="アプリ"> <p>{{ メッセージ }}</p> </div> <script type="text/javascript"> var アプリ = 新しい Vue({ el: '#app', データ: { メッセージ: 「xuxiao は男の子です」 }, beforeCreate: 関数() { console.group('beforeCreate 作成前のステータス ================》'); console.log("%c%s", "color:red" , "el : " + this.$el); //未定義 console.log("%c%s", "color:red","data : " + this.$data); //未定義 console.log("%c%s", "color:red","メッセージ: " + this.message) }, 作成: 関数 () { console.group('created 作成完了ステータス ================》'); console.log("%c%s", "color:red","el : " + this.$el); //未定義 console.log("%c%s", "color:red","data : " + this.$data); //初期化されましたconsole.log("%c%s", "color:red","message: " + this.message); //初期化されました}, beforeMount: 関数() { console.group('beforeMount マウント前のステータス ===============》'); console.log("%c%s", "color:red","el : " + (this.$el)); //初期化済み console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //初期化されましたconsole.log("%c%s", "color:red","message: " + this.message); //初期化されました}, マウント: 関数 () { console.group('mounted マウント終了ステータス ================》'); console.log("%c%s", "color:red","el : " + this.$el); //初期化済み console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //初期化されましたconsole.log("%c%s", "color:red","message: " + this.message); //初期化されました}, beforeUpdate: 関数 () { console.group('beforeUpdate 更新前のステータス ===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","データ: " + this.$data); console.log("%c%s", "color:red","メッセージ: " + this.message); }, 更新: 関数 () { console.group('更新されました 更新完了ステータス ================》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","データ: " + this.$data); console.log("%c%s", "color:red","メッセージ: " + this.message); }, beforeDestroy: 関数 () { console.group('beforeDestroy 破棄前の状態 ================》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","データ: " + this.$data); console.log("%c%s", "color:red","メッセージ: " + this.message); }, 破棄: 関数 () { console.group('destroyed 破壊完了ステータス ================》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","データ: " + this.$data); console.log("%c%s", "color:red","メッセージ: " + this.message) } }) </スクリプト> </本文> </html> 作成およびマウント関連
さらに、赤い領域では、el がまだ {{message}} であることがわかります。これは、最初にピットを占有する Virtual DOM (仮想 Dom) テクノロジが適用されている場所です。値は後でマウントされたときにレンダリングされます。 アップデート関連破壊する破壊に関しては、まだよくわかっていません。コンソールでコマンドを実行して、Vue インスタンスを破棄します。破棄が完了したら、メッセージの値を再度変更し、Vue はこのアクションに応答しなくなります。ただし、元々生成された DOM 要素はまだ存在しています。destroy 操作が実行されると、それらは Vue によって制御されなくなることがわかります。 要約する
この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。
1. MySQL rpm パッケージのインストール # インストールソースをダウンロードします [r...
オプションに属性 selected = "selected" を追加すると、それ...
この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...
Harborのインストールは非常に簡単ですが、Dockerログインで行き詰まってしまいました。このブ...
この記事では、例を使用して MySQL トリガーの構文とアプリケーションを説明します。ご参考までに、...
1. ファイアウォールルールを設定する例1: ポート8080を外部に公開する ファイアウォールコマン...
目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...
1つ目: テキスト/HTML経由var txt1="<h1>テキスト。<...
序文Linux 上で jar パッケージを実行する方法は誰もが知っています。なぜ別々に話したいのでし...
1. Docker環境を構築する1. Dockerfileを作成する Centos:latest か...
1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...
目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...
どの DBMS でも、インデックスは最適化にとって最も重要な要素です。データ量が少ない場合、適切なイ...