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

vuejsのmountedとは

vueのライフサイクルフックの中でcreatedの次に呼び出されます。

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

作ったアプリ： KeyScript

mountedの使い方

Option APIでのmounted

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

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

Composition APIでのmounted

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

<script>
import { onMounted } from 'vue'

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

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