Bemenderfer日本語はじめにライフサイクルフックは、使用しているライブラリがバックグラウンドでどのように機能するのかを見せてくれます。ライフサイクルフックを使用すると、コンポーネントの作成、DOMへの追加、更新、または破壊がいつ行われたかを確認することができます。公式Vue.jsドキュメントからのダイアグラムは、Vue.jsインスタンスのライフサイクルを表しています。この記事では、作成、マウント、更新、破壊のフックを紹介します。作成フックを理解する(初期化)_作成フック_は、コンポーネントで実行される最初のフックです。コンポーネントがDOMに追加される前に、アクションを実行することができます。他のフックとは異なり、サーバー側のレンダリング時にも作成フックが実行されます。クライアントレンダリング時とサーバーレンダリング時の両方で、コンポーネントに設定する必要がある場合は、作成フックを使用します。作成フック内のDOMまたは、対象のマウント要素(this.$el)にアクセスすることはできません。beforeCreatebeforeCreateフックは、コンポーネントの初期化時に実行されます。dataはまだリアクティブにされておらず、eventsもまだセットアップされていません。}}</script>この例では、beforeCreateフックが実行されると、スニペットは次のメッセージをログに記録します。initialized.createdcreatedフックでアクティブなリアクティブdataおよびeventsにアクセスできます。テンプレートと仮想DOMはまだマウントまたはレンダリングされていません。propertyとして保存します。updatedに変更されます。updatedとして表示されます。このステップでは作成フックの例をいくつか確認し、ライフサイクルの次の部分であるマウントフックに移動する準備が整いました。マウントフックを理解する(DOM挿入)_マウントフック_は、最もよく使用されるフックです。最初のレンダリングの直前および直後に、コンポーネントにアクセスすることができます。サーバー側のレンダリング時に実行されることはありません。最初のレンダリングの直前または直後に、コンポーネントのDOMにアクセスまたは変更する必要がある場合は、マウントフックを使用します。初期化時にコンポーネントのデータを取得する必要がある場合は、マウントフックを使用しないでください。**注:**特に、サーバー側のレンダリング時にデータが必要な場合は、代わりに、created(またはkeep-aliveコンポーネントのためにcreatedおよびactivated)を使用します。beforeMountbeforeMountフックは、最初のレンダリングが行われる直前、およびテンプレートまたはレンダリング関数がコンパイルされた直後に実行されます。}}</script>この例では、beforeMountフックが実行されると、スニペットは次のメッセージをログに記録します。yet.mountedmountedフックでは、(this.$elにより)リアクティブコンポーネント、テンプレート、レンダリングされたDOMにフルアクセスができます。mountedは、DOMを変更するために使用します—特にVue以外のライブラリを統合する場合は次のようになります。}}</script>この例では、mountedフックが実行されると、スニペットは次のメッセージをログに記録します。(this.$el.textContent)のメッセージがログに記録されます。このセクションでは、マウントフックのユースケースを見てきました。次のステップでは、更新フックを使用する例を確認します。更新フックを理解する(差分および再レンダリング)_更新フック_は、コンポーネントで使用されているリアクティブプロパティが変更された場合、または何らかの理由で再レンダリングされた場合に呼び出されます。これらの使用により、コンポーネントの_watch-compute-render_のサイクルにフックすることができます。デバッグやプロファイリングなどで、コンポーネントがいつ再レンダリングされるかを知りたい場合は、更新フックを使用します。コンポーネントのリアクティブプロパティがいつ変更されるかを知る必要がある場合は、更新フックを使用しないでください。代わりにcomputedプロパティ、またはwatchersを使用します。beforeUpdatebeforeUpdateフックは、コンポーネントでデータが変更され、更新サイクルが開始された後、DOMにパッチが適用されて再レンダリングされる直前に実行されます。beforeUpdateは、コンポーネントが実際にレンダリングされる前に、コンポーネントのリアクティブデータの新しい状態を取得する必要がある場合に使用します。}}</script>まず、スニペットはcounterを0として保存します。createdフックが実行されると、1000ミリ秒ごとにcounterが増加します。beforeUpdateフックが実行されると、スニペットは次のメッセージをログに記録し、counterの数がログに記録されます。yet.updatedupdatedフックは、コンポーネントでデータが変更され、DOMが再レンダリングされた後に実行されます。updatedは、プロパティの変更後にDOMにアクセスする必要がある場合に使用します。}}</script>まず、スニペットはcounterを0として保存します。createdフックが実行されると、1000ミリ秒ごとにcounterが増加します。updatedフックが実行されると、スニペットは次のメッセージをログに記録し、レンダリング値と現在の値が等しいためtrueのブール型がログに記録されます。patched.更新フックの使い方を見たので、次に破壊フックについて学ぶ準備が整いました。破壊(破棄)フックを理解する_破壊フック_を使用すると、クリーンアップや分析送信など、コンポーネントが破壊された場合にアクションを実行できます。コンポーネントが破棄され、DOMから削除されたときに起動します。beforeDestroybeforeDestroyは、破壊の直前に起動されます。コンポーネントはまだ完全に存在し、機能します。beforeDestroyは、イベントまたはリアクティブなサブスクリプションをクリーンアップする必要がある場合に使用します。}}</script>スニペットは、最初にexampleLeakyPropertyを保存します。beforeDestroyフックが実行されると、スニペットは次のメッセージをログに記録し、exampleLeakyPropertyが削除されます。yet.destroyeddestroyedフックに到達する頃には、コンポーネントには実質的に何も残っていません。コンポーネントに関連付けられていたものはすべて破壊されました。destroyedは、最後にクリーンアップを行う場合、またはコンポーネントが破壊されたことをリモートサーバーに通知する必要がある場合に使用します。}}</script>まず、スニペットはExampleAnalyticsServiceをインポートします。beforeDestroyフックが実行されると、スニペットは次のメッセージをログに記録します。destroyedというメッセージが渡されます。これで、Vue.jsライフサイクルフックの概要の確認を完了しました。その他のフックその他に、activatedおよびdeactivatedの2つのフックがあります。これらは、keep-aliveコンポーネント用のものであり、この記事の範囲外のトピックです。タグでラップされたコンポーネントがいつオンまたはオフに切り替えられたかを検出できます、と説明すれば十分でしょう。コンポーネントのデータを取得したり、状態の変更を処理するために使用して、コンポーネントの完全な再構築を行うことなく、createdおよびbeforeDestroyのように効果的に動作することができます。まとめこの記事では、Vue.jsインスタンスのライフサイクルで使用可能なさまざまなライフサイクルフックを紹介しました。作成フック、マウントフック、更新フック、破壊フックのさまざまなユースケースを見てきました。Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトをご覧ください。