マウント直後に実行する

はじめの一度だけ実行したい場合、DOMが作成されマウントされた直後に、処理を実行することで、はじめの一度だけ実行できます。
そして、Composition API では、onMountedを利用することで、マウント直後に実行する処理を記述することができます。

onMountedは、Compostion API の setup()内に記述します。
そして、onMountedには、実行したい関数を渡すことで、マウント直後に実行したい処理を記述します。

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

Composition API では、マウント直後（onMounted）のように、あるタイミングで実行したい処理を記述する方法が提供されています。

ライフサイクルフック

Vueコンポーネントに、「あるタイミング」で処理を実行したい場合があると思います。
例えば、マウント直後、マウント前、再レンダリング前、再レンダリング後、破棄されたとき、などのタイミングで処理を実行できるようなものが用意されています。

これらをライフサイクルフックと呼びます。
Composition API では、例に挙げたライフサイクルフックが提供されています。

このほかにも、ライフサイクルフックがいくつか提供されています。
詳しくは、↓にかかれています。

これらのライフサイクルフックは、onMountedと同様に、setup()内に記述し、そのタイミングで実行したい関数を引数として渡します。

ライフサイクルフックを利用することで、ある特定のタイミングで処理が実行できます。