saneatsu
10/8/2019 - 3:45 AM

Vueのライフサイクル。createdとmountedの使い分け

created

  • 非同期通信を使ってデータを初期化するとき
  • よく使われるパターンとしてAPIなどを叩いて非同期通信で取得したデータをdataに初期値として挿入する処理が挙げられると思います。 このケースでは初期化のタイミングで使うという面ではbeforeMountやmountedで 非同期通信を行ってもよいのですが、DOMのマウントが行われデータを画面に反映するまでの時間を少しでも減らすためにはcreatedを使う必要があります。
  • beforeCreateではリアクティブデータが初期化されていないため、dataに挿入することができない。

mounted

  • DOMにアクセスする必要がある場合
  • その他HTML要素の高さや幅を取得する場合の初期化処理はmounted
  • ただし、mountedは全ての子コンポーネントがマウントされていることを保証しないことに注意
  • Vue全体がレンダリングされた後に処理を行いときは、vm.$nextTickを使いましょう

参考