frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【Vue.js】createdとmountedの違い【簡潔に説明】

スポンサードリンク


スポンサードリンク


Vue.jsのcreatedとmountedの違いはライフサイクルの中で発動タイミングの違いです。

下記を見ていただくとわかりやすいかと思います。


See the Pen
dxZdgK
by funclur (@funclur)
on CodePen.


var app = new Vue({
  el: '#app',
  data: {
  },
  mounted() {
    console.log(2)
  },
  created() {
    console.log(1) 
  }
})
//1
//2

つまり createdのほうが早く、 mountedのほうが遅いです。


詳細に言うとライフサイクルの図の通りとなります。


https://jp.vuejs.org/v2/guide/instance.html

createdの用途

  • windowサイズを取得しての処理
  • Loadingの表示
  • $router文字列の取得
  • 更新時点での分岐処理
  • リダイレクト

mounted

  • Loadingの非表示
  • その他DOM構築後に取得する処理