ライフサイクルを理解する理由
ライフサイクルとは
さらに、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 接続クエリを知っていますか?
1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...
スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...
最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...
//文法: @media mediatype and | not | only (メディア機能) ...
MySQL 8.0.16 以降では、パスワードの有効期限ポリシーを設定できます。今日は、この小さな知...
目次これを Vue.$store.state.xx.xxストアからデータを取得する私のプロジェクトフ...
レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...
フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...
目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...
GROUP BY 構文を使用すると、指定されたデータ列の各メンバーに従ってクエリ結果をグループ化して...
HTML でよく使用されるエスケープ文字をまとめると次のようになります。 改行...
複数列のインデックスについては、理解が不足していることがよくあります。よくある間違いは、多数の列に独...
ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体...
以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...
前回の記事では、MySQL データ保存手順パラメータの詳細な例を紹介しました。今日は、JSON デー...