ライフサイクルの紹介
Vue のライフ サイクルは、コンポーネント インスタンスの作成、マウント、更新、破棄のプロセス中に Vue によって提供される一連のメソッドを指します。これらのメソッドを使用すると、コンポーネントのカスタマイズのニーズを満たすためにさまざまな段階で特定の操作を実行できます。
ライフサイクル機能がなければ、多くの機能を実装できません。
一、作成前
インスタンスが初期化された後、データの監視とイベント/ウォッチャーのセットアップが呼び出されます。この段階では、コンポーネントのプロパティとメソッドは初期化されていないため、プロパティ、データ、メソッドにアクセスできません。
二、created
インスタンスの作成直後に呼び出されます。この段階では、プロパティ、データ、メソッドなどのプロパティにアクセスし、データを操作できます。
3.マウント前
マウントが開始される前に呼び出されます。この段階では、テンプレートはコンパイルされていますが、まだページにレンダリングされていません。この段階で、データ計算や非同期操作を実行できます。
4. 取り付け済み
インスタンスがページにマウントされた後に呼び出されます。この時点で、コンポーネントはページにレンダリングされ、DOM 要素にアクセスできるようになります。これは、要素の幅と高さの取得、イベント リスナーの追加、リクエストの送信など、DOM 要素を必要とするいくつかの操作を実行するためによく使用されます。
5.アップデート前
データが更新される前に呼び出されます。この段階では、以前のデータのステータスを取得し、更新前の非同期リクエストのトリガーなど、より複雑な操作を実行できます。
六、更新しました
データが更新された後に呼び出されます。このフック関数がトリガーされると、DOM が再レンダリングされ、すべてのコンポーネントが更新されたことが保証されます。この段階で DOM 操作を実行できますが、データ更新の無限ループを避けるために注意する必要があります。
7. アンマウント前
インスタンスが破棄される前に呼び出されます。この段階で、タイマーをクリアしたり、イベント リスナーのバインドを解除したりできます。
8. アンマウント
インスタンスが破棄された後に呼び出されます。この段階では、コンポーネント関連のデータ、タイマー、およびイベント リスナーがクリアされ、コンポーネントは使用できなくなります。