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はカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。
考えられる理由: Seata が MySQL 8 をサポートしない主な理由は、接続ドライバーがバージ...
シナリオ: laradock 開発環境 (php7.3+mysql5.7) がローカルに構築されてい...
目次1. 事例紹介2. システムのデフォルトのストレージエンジンとデフォルトの文字セットを表示する3...
World Wide Web Consortium (W3C) は、HTML 5 仕様のドラフトをリ...
Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...
目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...
この記事では、電子商取引プラットフォームで商品の詳細を表示する一般的な例を紹介します。たとえば、ある...
Linux の scp コマンド (Windows では scp は使用できません) と、mysql...
目次LocalStorageとはSessionStorageとはLocalStorage と Ses...
nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...
この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...
1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...
目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...
easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...
この記事の例では、WeChatアプレットで写真をアップロードするための具体的なコードを参考までに共有...