はじめに
こんばんは。
vue3の入門を頑張ってやってみます。
参考書籍は Web+DB Press vol. 120の 「最新Vue.js3入門」です。
今回は Composition APIです。
参考サイト
本題
さっそくやってみた
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 側では ○○ という感じでアクセスできます。
これはなにが嬉しいの？
例えば
「こっちのコンポーネントの、このデータ、もしくは機能をこっちのコンポーネントでも使いたい！！！」
みたいなニーズって、大規模になればなるほどでてくると思います。
これ、従来だと、なんとか親子関係にしたり、vuexとかつかって、表現したりするのでしょうか？
これが、関数ベースのComposition APIの場合は、注入しやすくなるみたいです！
リアクティブなデータをパーツパーツで細かく分けて、必要とするコンポーネントに注入できるという感じでした。
終わりに
Compositon API なかなかおもしろいですね。
ただ、設計が柔軟にできるようになる代わりに、設計が大事になってくる感じですね。。。
次は、teleport調べてみます。
現場からは以上です。
