オプション: ライフサイクル | Vue.js

<aside> 🌿 非同期通信はcreated時に、それ以外はmounted時に設定すればいいかな！

</aside>

created・・・data生成のタイミング（非同期通信でデータ取得したい場合）

以下のデータがセットアップされた段階で呼び出される

• 以下はセットアップ済み
  • リアクティブなデータ
  • 算出プロパティ（computed？）
  • メソッド
  • ウォッチャー
• DOM要素の生成はまだ

mounted・・・DOM生成のタイミング（まずはmounted後で）

コンポーネントがマウントされた後に呼び出される（Reactでいうところの、useEffectが初回だけ実行されるバージョンと同じことかと・・・）

<aside> ⚠️ サーバーサイドレンダリング（SSR）時には呼び出されないので注意！

</aside>

▼コンポーネントがマウントされたと見なされるタイミング

• すべての同期的な子コンポーネントがマウントされた時（非同期コンポーネントや <Suspense>ツリー内のコンポーネントは含まれません）

• そのコンポーネント自身の DOM ツリーが作成され、親コンテナーに挿入された時

  ※ アプリケーションのルートコンテナが document 内にある場合のみ、そのコンポーネントの DOM ツリーも document 内にあることを保証することに注意