ライフサイクルを理解する理由
ライフサイクルとは
さらに、Vue インスタンスは Vue フレームワークのエントリ ポイントであり、フロントエンドの ViewModel として理解できます。ページ内のビジネス ロジック処理とデータ モデルが含まれています。また、Vue インスタンスの生成、コンパイル、ハング、破棄のプロセス全体にわたって js 制御を実行するのに役立つ独自のライフ サイクル関数フックもあります。 ライフサイクルフック関数ライフサイクルフックはライフサイクルイベントの別名です。ライフサイクルフック = ライフサイクル関数 = ライフサイクルイベント 主なライフサイクル機能のカテゴリは次のとおりです。
作成され、マウントされたライフサイクルフック関数の中で、最もよく使用されるのは、おそらく created と mount です。
実際、この 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) }, }) </スクリプト> 結果は次のとおりです。
説明する: 作成されたフックに非同期関数が追加されているため、関数の実行順序は次のようになることがわかります。 作成フック、マウントフック、非同期関数、更新フック(イベントキューの原則によれば、更新された後にのみ、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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析
>>: どのような種類の MYSQL 接続クエリを知っていますか?
Java 言語には多くのバージョンがあります。一般的に使用されている Java 8 に加えて、一部の...
文章さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでな...
目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...
たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...
目次1: galera-clusterの紹介2. galera-clusterの仕組み3: Mari...
基本的な構文: <input type="hidden" name=&qu...
データベース SQL の最適化はよくある問題です。何百万ものデータ ボリュームに対してページング ク...
グローバル ID を生成する方法は多数あります。ここでは簡単な解決策を紹介します。MySQL の自動...
独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...
この記事では、マウスの動きに追従する画像を実現するためのJavaScriptの具体的なコードを参考ま...
この記事では、WeChatアプレットの左右連動を実現するための具体的なコードを参考までに紹介します。...
1. コマンドの紹介read コマンドは、シェルの組み込みコマンドで、標準入力または -u オプショ...
開発から導入まで自分で行うシングルページアプリケーションを開発する場合、ビルドを実行した後 npm ...
目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...
このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...