Cacher is the code snippet organizer for pro developers

created

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

mounted

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

参考

• Vueのライフサイクルフックまとめ