Vue3超入門 vol.1 - もがき系プログラマの日常

はじめに

こんばんは。

vue3の入門を頑張ってやってみます。

参考書籍は Web+DB Press vol. 120の「最新Vue.js3入門」です。

今回は Composition APIです。

WEB+DB PRESS Vol.120

作者:hikalium,土井麻未,石井輝亜,太田洋介,佐藤歩,池田拓司,伊原力也,松田明,中島大一,曽根壮大,杉本啓,大和田純,岡野原大輔,岡田正平,hitode909,言上侑也,笹田耕一,櫻庭祐一,石上晋,altnight,牧大輔,小林泰士,関満徳,是澤太志,はまちや2,竹原
発売日: 2020/12/24
メディア: 単行本

参考サイト

本題

さっそくやってみた

Composition APIはざっくり、関数ベースでコンポーネント定義ができる機能のようです。

今までのコンポーネント定義(Options API)とは違い、 setup()というメソッド内に機能を記述していく形です。

Composition APIで作った場合

<template>
  <div>
    <label>名字:</label>
    <input type="text" v-model="state.lastName" />
  </div>

  <div>
    <label>名前:</label>
    <input type="text" v-model="state.firstName" />
  </div>

  <div>
    <label>注文個数(単価100円): </label>
    <input type="number" v-model="state.amount" />
  </div>

  <div>
    <label>合計: </label>
    <span>{{ totalFormat }}</span>
  </div>

  <div>
    <button type="button" @click="onClick">submit!!</button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  name: "CompositionExample",
  setup() {
    const state = reactive({
      lastName: '',
      firstName: '',
      amount: 0
    })
    const totalFormat = computed(() => (state.amount * 100).toString().replace(
        /(\d+?)(?=(?:\d{3})+$)/g,
        function (x) {
          return x + ',';
        }))
    const onClick = () => {
      alert(`${state.lastName} ${state.firstName}さん。購入ありがとうございました。`)
    }
    
    return {
      state,
      totalFormat,
      onClick,
    }
  }
}
</script>

<style scoped>

</style>

Options APIで作った場合

<template>
  <div>
    <label>名字:</label>
    <input type="text" v-model="lastName" />
  </div>

  <div>
    <label>名前:</label>
    <input type="text" v-model="firstName" />
  </div>

  <div>
    <label>注文個数(単価100円): </label>
    <input type="number" v-model="amount" />
  </div>

  <div>
    <label>合計: </label>
    <span>{{ totalFormat }}</span>
  </div>

  <div>
    <button type="button" @click="onClick">submit!!</button>
  </div>
</template>

<script>
export default {
  name: "OptionsApiExample",
  data() {
    return {
      lastName: '',
      firstName: '',
      amount: 0
    }
  },
  methods: {
    onClick() {
      alert(`${this.lastName} ${this.firstName}さん。購入ありがとうございました。`)
    }
  },
  computed: {
    totalFormat() {
      return (this.amount * 100).toString().replace(
          /(\d+?)(?=(?:\d{3})+$)/g,
          function (x) {
            return x + ',';
          }
      );
    }
  }
}
</script>

<style scoped>

</style>

ざっくり作ったんですが、こんな感じの違いっぽいです。

setup()内に全部集約されている感じですね。

reactive の他に ref もあるみたいです。

どちらもリアクティブな値に出来るようですが、どちらを使うのが良いのでしょうか？

本読んだ感じ、ざっくり、 reactive が複数 ref が単数という感じでした。

その他にも、 refで作成した値は、 script 内では、 ○○.value という感じで呼び出して、 template 側では ○○ という感じでアクセスできます。