Open2023/06/23にコメント追加1

【Vue.js】Options API の Created の動きを Composition API で行う場合

例えば、画面生成時に外部APIからデータを取得してきて、レスポンス情報から画面を生成したい。
そんな時にVue2系の頃はOptions APIが存在しライフサイクルフックの中に created といった起動時に実行される関数が存在したので以下のような書き方ができた。

<script>
export default {
  name: 'App',
  async created() {
    await this.connectedCallback()
  },
  methods: {
    async connectedCallback() {
      await fetch('https://reqres.in/api/users/2')
    }
  }
}
</script>

時代は移りVue3系の時代に。Composition APIなるものが導入されたようだ。
どれ同じような実装をしてみるか。なんとライフサイクルフックの中にcreatedがないではないか。

ふむふむ。どうやらsetupフックがComposition APIのエントリーポイントとなるようだ。加えてonmountedがコンポーネントをマウントした後に呼び出されるようだ。

組み合わせることで同じ挙動を代用できるからなくなったのですな。

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    onMounted(async () => {
      await fetch('https://reqres.in/api/users/2')
    })
    return {}
  }
}
</script>

さらに時代は進み<script setup>が導入されsetupフックよりこちらが推奨になっているようだ。

setupフックを使わずともエントリーポイントとして読み込まれるみたい。
だから要領は一緒だけどもよりVue独自の書き方が減り、より純粋なJavaScript構文に近づけたようだ

<script setup>
import { onMounted } from 'vue'
const connectedCallback = async () => {
  await fetch('https://reqres.in/api/users/2')
}
onMounted(async (): Promise<void> => {
  await connectedCallback()
})
</script>

※ Vue2系の頃は...とか昔からVueユーザだったような書き振りしてるけど今月からちゃんと触り出したもろ初学者ですww