created と mounted は、Vue.js などのフロントエンドフレームワークで使われるライフサイクルフックです。これらのフックは、コンポーネントのライフサイクルの異なる段階で自動的に呼び出され、特定のタイミングでコードを実行するのに役立ちます。
created
created フックは、コンポーネントがインスタンス化されてリアクティブデータが設定された後、しかしDOMがマウントされる前に呼び出されます。この時点で、データ、計算プロパティ、メソッド、ウォッチャ（監視プロパティ）が利用可能ですが、テンプレートや仮想DOMはまだアクセスできない状態です。このフックは、APIからデータをフェッチするなど、初期化に必要な処理を行うのに適しています。
mounted
mounted フックは、コンポーネントがDOMにマウントされた後に呼び出されます。この時点で、テンプレート内のすべてのディレクティブが解決され、実際のDOM要素にアクセスできるようになります。mounted は、DOMに依存する操作、たとえばDOM要素のサイズを取得したり、外部ライブラリを使ってDOMを操作する際に特に有用です。
使い分け
- created: データの初期化やAPIコールなど、DOMの準備が必要ない処理に適しています。
- mounted: DOM要素とのやりとりが必要な初期化作業、または外部ライブラリを使う設定に適しています。
これらのフックを適切に使い分けることで、アプリケーションのパフォーマンスを向上させたり、不要な再レンダリングを避けたりすることができます。
コメント