vue.jsライフサイクル関数の役割は何ですか

vue.js ライフサイクル関数の役割: 1. [beforeCreated()] は、インスタンスが完全に初期化される前に関数が呼び出されることを意味します; 2. [beforeMount()] このとき、テンプレートコンパイルされましたが、まだページにレンダリングされていません; 3. [updated()] ページでデータの更新が完了します。

【おすすめ関連記事: vue.js】

vue.js ライフサイクル関数の役割:

序文

Vue インスタンスには完全なライフサイクルがあります。つまり、作成から初期化、テンプレートのコンパイル、DOM でのハング、レンダリングまでです。 update - レンダリングやアンロードなどの一連の処理が Vue インスタンスのライフサイクルとなり、フックにより特定の段階で特定の処理を実行する機会が与えられます。

各関数の役割

beforeCreated():

• は、インスタンスが完全に初期化されました この関数は以前に呼び出されました;

created():

• 現時点での Vue のデータとメソッド (データ、メソッド) が初期化されています;

• データやメソッドを操作したい場合は、早めにこの関数で操作する必要があります;

• 作成が完了したら HTML テンプレートのコンパイルを開始し、テンプレート文字列を dom にレンダリングし、最後にコンパイルされた最終テンプレートをメモリ内に生成します;

• 最終テンプレートはメモリ内にのみ存在しますページへ;

beforeMount():

• 現時点では、テンプレートにはコンパイルされていますが、まだレンダリングされていません。このページに移動します;

mounted():

• これページがレンダリングされ、ドキュメント内に dom ノードがすでに存在している点 ;

• dom ノードを操作したい場合は、できるだけ早くこの関数で操作する必要があります。

• mounted を実行した後、インスタンスが作成されたことを意味します。他の操作がない場合、メモリ内にはそれ以上のアクティビティはありません。

beforeUpdate():

• 現時点ではページは完全にマウントされており、この関数はページ データが変更されたときに実行されることを意味します。

• データが変更されると、ページ データは更新されませんが、データ内のデータは更新されます;

updated():

• #ページのデータ更新が完了しました;

# #beforeDestory():

この関数が実行されると、Vue インスタンスは破棄段階に入ります;
この時点では、フィルター、データ、およびメソッドはまだ使用できます;
##destoryed():

コンポーネントは完全に破棄され、すべてのデータ、メソッドは使用できません

詳細なフローチャート

## 関連する無料学習の推奨事項:

JavaScript (ビデオ)

以上がvue.jsライフサイクル関数の役割は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。