blog

Vueのライフサイクル関数

たとえば、データリスナーの設定、テンプレートのコンパイル、インスタンスのDOMへのマウント、データが変更されたときのDOMの更新などが必要です。また、この過程でライフサイクルフックと呼ばれる関数が実行...

Oct 30, 2020 · 3 min. read
シェア

例えば、データリスナーの設定、テンプレートのコンパイル、インスタンスのDOMへのマウント、データが変更されたときのDOMの更新などです。また、このプロセスの間にライフサイクルフックと呼ばれる関数が実行され、ユーザはさまざまな段階で独自のコードを追加することができます。

すべてのライフサイクルフックは、自動的に thisコンテキストをインスタンスにバインドするので、データにアクセスしたり、プロパティやメソッドで演算を行ったりすることができます。

  1. beforeCreate : インスタンスが初期化された後に、データ観測とイベント/ウォッチャー・イベントのコンフィギュレーションが呼び出されます。

  2. created : インスタンスが作成されると同時に呼び出されます。この時点で、インスタンスは、データ観察、プロパティとメソッドの演算、およびウォッチ/イベント・ コールバック用に構成されています。ただし、マウント・フェーズはまだ開始されておらず、$el プロパティはまだ使用できません。

  3. beforeMount : マウントの最初に呼び出されます:関連するレンダー関数が最初に呼び出されるとき。

    このフックはサーバサイドレンダリング中には呼び出されません。

  4. mounted : インスタンスがマウントされた後、elが新しく作成されたvm.$elに置き換えられるときに呼び出されます。ルートインスタンスがドキュメント内の要素にマウントされている場合、vm.$elは、mountedが呼び出されたとき、ドキュメント内にあります。

    mountedは、すべての子コンポーネントが一緒にマウントされることを保証する ものではないことに注意してください。ビュー全体がレンダリングされるまで待ちたい場合は、mounted の内部で vm.$nextTick使用できます:

    mounted: function { // ビュー全体がレンダリングされた後にのみ実行されるコード }) }.

このフックはサーバサイドレンダリング中には呼び出されません。

5. beforeUpdate : データが更新されたときに呼び出されます。追加されたイベントリスナーを手動で削除するなど、既存の DOM へのアクセスを更新する場合に適しています。

最初のレンダリングだけがサーバーサイドで行われるため、このフックはサーバーサイドレンダリング中には呼ばれません。

6. updated : このフックは、データの変更によって仮想 DOM が再レンダリングされ、パッチが適用されたときに呼び出されます。 このフックが呼ばれると、コンポーネントの DOM が更新され、DOM に依存した操作ができるようになります。しかし、ほとんどの場合、この間に状態を変更することは避けるべきです。それに応じて状態を変更したい場合は、通常、代わりにプロパティの計算 watcher 使用するのが最善です。

updated 、すべての子コンポーネントが一緒に再描画されることを保証する ものではないことに注意してください。ビュー全体が再描画されるまで待ちたい場合は、updatedで vm.$nextTick使用します:

updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }

このフックはサーバサイドレンダリング中には呼び出されません。

7. beforeDetsroy:インスタンス破棄コール。この段階では、インスタンスはまだ完全に利用可能です。このフックは、サーバー側のレンダリング中には呼び出されません。

8. destroyed : インスタンスが破棄されたときに呼び出されます。このフックが呼ばれると、Vueインスタンスに対応するすべてのディレクティブのバインドが解除され、すべてのイベントリスナーが削除され、すべての子インスタンスが破棄されます。

要約:一般的なデータ要求は、マウントに置くことができます。

注: ライフサイクルフックのthisコンテキストは、それを呼び出したVueインスタンスを指します。

created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())ようなオプション・プロパティやコールバックでは使用しないでください。 Uncaught TypeError: Cannot read property of undefined Uncaught TypeError: this.myMethod is not a function この""は、それが見つかるまで上位のレキシカルスコープを検索するための変数として使用されます。

Read next

プロセス、スレッド、同時実行」に関する記事

プロセス-オペレーティングシステムが提供する抽象的な概念で、リソースの割り当てやスケジューリングのためのシステムの基本単位であり、オペレーティングシステムの構造の基本です。プログラムは、命令、データ、およびそれらの組織の記述であり、プロセスはプログラムの実体です。プログラム自体にはライフサイクルはなく、ただいくつかの命令のディスク上に存在し、プログラムが実行されればそれがプロセスです。 プログラムの実行が必要になると、オペレーティングシステムはコードとすべての静的データをメモリに記録し、...

Oct 30, 2020 · 11 min read