「Vue.js3やさしい入門書」の感想・備忘録1

2022.11.19
スポンサーリンク
posted with ヨメレバ
Amazonで見る
Kindleで見る

点数

87点

感想

Vue.3のComposition API、糖衣構文、Piniaについてわかりやすく説明されていて、なかなかの良書だった。

Vite

  • Vue.js3.2からはVue CLIではなくViteがビルドツールとして推奨されている。
  • Vue CLIよりも高速でreactにも対応している。
  • 使い方
    npm init vite@latest
    cd xxx
    npm install npm
    run dev npmで実行
    run buildでビルド
    npm run previewでビルドされたdistディレクトリをプレビュー

reactive関数

  • reactive関数はオブジェクト（配列、Mapなども含む）をリアクティブにする。
  • 以下のデメリットがあるので注意。
    • プロパティを関数に渡すとリアクティブにならない
    • 分割代入やスプレッド構文を使うとリアクティブにならない
<script setup>
import {reactive } from 'vue'
const obj = reactive({num: 0})
const countUp = () => { obj.num++ }
</script>

toRefs関数

  • reactiveで生成したオブジェクトに対して分割代入を行うと、リアクティブではなくなってしまう。
  • toRefs関数を使うとリアクティブを保ったまま分割代入することができる。
  • <script>内では分割代入された変数へのアクセスに.valueが必要なので注意。（理由は後述）
<script setup>
import { reactive, toRefs } from 'vue'
const state = reactive({name: '', score: 0})
const {name, score} = toRefs(state)
console.log(score) // ObjectRefImpl
console.log(score.value) // 0
</script>

ref関数

  • reactive関数には以下の制約がある。そのためref関数が用意されている。
    • プリミティブ型に使うことはできない。
    • 関数に渡すとリアクティブにならない。
  • ref関数はプリミティブ値をラップしたRefImplオブジェクトを返す。
  • <script>内では.valueで値にアクセスするが、<template>では自動でアンラップされるため.valueは不要。
  • refのデメリットは参照時に.valueが必要になる点。
  • reactiveのデメリットはプリミティブ型に使えない点、分割代入が使えない点。
  • 公式サイトは「refとreactiveをどう使い分けるかを決めるのは時期尚早」としている。
  • ベストプラクティスが策定されるまでは「プリミティブ型にはref、オブジェクトにはreactiveを使用する」とするのが無難らしい。
<script setup>
import { ref } from 'vue'
const count = ref(0)
const countUp = () => {
  count.value++
}
</script>
<template>
  <input type="number" v-model.number="count">
</template>

definePropsとdefineEmits

  • 糖衣構文でprops, emitを使う場合はdefineProps関数とdefineEmits関数を使う。
  • definePropsとdefineEmitsはインポート不要。

・子コンポーネント

<script setup>
defineProps(['persons'])
defineEmits(['select-row'])
</script>
<template>
  <ul>
    <li v-for="person in persons" @click="$emit('select-row', person.id)">{{ person.id }}:{{ person.name }}</li>
  </ul>
</template>

親コンポーネント

<script setup>
import { ref } from 'vue'
import Chapter4Child from './Chapter4Child.vue'
const objects = [
  {id: 1, name: 'one'},
  {id: 2, name: 'two'}
]
const selectedId = ref(0)
const handleSelectRow = (id) => {
  selectedId.value = id
}
</script>
<template>
  <Chapter4Child :persons="objects" @select-row="handleSelectRow"/>
  <p>selected={{ selectedId }}</p>
</template>
スポンサーリンク

コメント