【Vue.js】createdとmountedの違いについて簡単に解説

はじめに

Vue.jsで開発していて画面の初期表示はmountedを使うと良いと教えてもらったがよくわからなかったので、調べた内容を備忘録としてここに残しておきます。
また、createdとmountedの違いについても少し調べたため簡単にまとめておきます。
もし間違っている箇所があれば優しく指摘していただけると幸いです。

結論

• created：Vueインスタンスが生成され、データが初期化された後に実行される
  　　　　（DOMはまだ生成されていないので、DOM操作はできない）
• mounted：VueインスタンスがDOMにマウントされた後に実行される
  　　　　（DOM生成された後なのでDOM操作ができる）

created

ここではまだDOMが生成されていないため、DOM操作はまだできない。
ただし、データは初期化されているため、リアクティブデータやメソッド等を参照することは可能。

App.vue

<script>
new Vue({
  el: 'app',
  data() {
    return {
      styles: {
        width: '100vw',
        height: '100vh'
      }
    }
  },
  created () {
    // created内で実行したい処理を記述
    console.log('width:' + this.styles.width)
    console.log('height:' + this.styles.height)
    // width: 100vw 
    // height: 100vh
  }
});
</script>

mounted

インスタンス初期化時、DOMが生成された後に実行されるため、DOM操作ができる。

App.vue

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'Value'
    }
  },
  mounted() {
    // ここにmounted内で実行したい処理を記述
  }
});
</script>

ただし
mountedの段階で全ての子コンポーネントもマウントされているとは限らない。
全ての子コンポーネントがレンダリングされるまで待つ場合は$nextTickを使うと良い。

App.vue

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'Value'
    }
  },
  mounted() {
    this.$nextTick(() => {
    // ここにmounted内で実行したい処理を記述
    // 子コンポーネントもマウントされてから実行される
    });
  }
});
</script>