Vue3 Tutorial Step9 ライフサイクルとテンプレート参照

ライフサイクルとテンプレート参照

今回のチュートリアルでは、ライフサイクルフックとテンプレート参照について学習した。

Vue.js

Vue.js - The Progressive JavaScript Framework

ja.vuejs.org

onMountedを例にライフサイクルフックを学習。

ライフサイクルフック

ライフサイクルフックは、コンポーネントのライフサイクル（生成から削除されるまで）のイベントに応じて、コールバック関数を設定して処理を実行する。

<script setup>
import { onMounted, ref } from 'vue'

const pElementRef = ref(null)

onMounted(() => {
  pElementRef.value.textContent = "Mounted!"
})
</script>

<template>
  <p ref="pElementRef">Hello</p>
</template>

所感

前回まで、Options APIスタイルでチュートリアル学習を進めていたが、今回からComposition APIスタイルで進めるようにした。

というか、そもそもVueにはOptions APIとComposition APIがあることを知らなかった。ここまで学習してやっと気付いた。

昔、Vueを触った時には、Options APIとComposition APIの存在を知らず、雰囲気で書いていた。そのため、2つのAPIスタイルを混ぜてしまい、エラーが出まくってよく混乱していた。

Vue 2系ではOptions APIのスタイルのみだったが、Vue 3系でComposition APIスタイルが追加されたらしい。どうやらReactのスタイルに影響を受けているっぽい。

追記： Vue3のComposition APIは、ReactのHooksに影響を受けているらしい。実際、Vueの開発者のEvan You氏は、ReactのHooksに影響を受けていることをTwitter上で公言していた事を知った。