【Vue3】createdとは？使い方を紹介する

vuejsのcreatedとは

createdはvueインスタンスが作られたすぐ後に呼び出されます。

createdの使い方

Option APIでのcreated

Option APIでコンポーネントを作っていく時はcreatedの中に書きます。

<script>
export default {
  created: function () {
    console.log('created!')
  }
}
</script>

Composition APIでのcreated

Composition APIではcreatedオプションはなくなっています。Composition APIでcreatedに相当する処理を作っていく時はsetupの中に書きます。

<script>
export default {
  setup() {
    console.log('created!')
  }
}
</script>

ライフサイクルフック | Composition API | Vue.js

createdの中でmethodを呼び出す

createdの中でmethodを呼び出すことも出来ます。

<script>
  export default {
    created: function () {
      console.log('created!')
      this.myMethod()
    },
    methods: {
      myMethod() {
        console.log('myMethod start!')
      }
    }
  }
</script>

Vue SFC Playgroundはこちら

createdとmountedの違い

createdとmountedの違いは、createdが先に呼び出されて、mountedが後に呼び出されます。

createdで操作できるもの

• data
• computed
• properties
• methods
• watch

createdで操作できないもの

• $el

$elを操作できないのは、createdの時点ではDOMの描画が終わってないからです。

async/awaitなcreated

async/awaitをcreatedで使って、非同期処理を同期的に書きたい時があるかも知れません。 そんな時の書き方を紹介します。

まずは非同期のままのコードです。

<script>
  export default {
    created: function () {
      const timer = function(step, time) {
        return new Promise(resolve => {
          setTimeout(() => {
            console.log("step " + step)
            resolve()
          }, time)
        })
      }

      timer(1, 3000)
      timer(2, 1000)
    }
  }
</script>

Vue SFC Playgroundはこちら

結果は下のようになるはずです。

step 2
step 1

後から実行した、timer(2, 1000)の方が時間が短いので先にコンソールに出力されます。

今度はasync/awaitを使って書きます。

<script>
  export default {
    created: async function () {
      const timer = function(step, time) {
        return new Promise(resolve => {
          setTimeout(() => {
            console.log("step " + step)
            resolve()
          }, time)
        })
      }

      await timer(1, 3000)
      await timer(2, 1000)
    }
  }
</script>

Vue SFC Playgroundはこちら

結果は下のようになるはずです。

step 1
step 2

async/awaitが効いて、await timer(1, 3000)の後にawait timer(2, 1000)されています。