Vue3のcomputedをちゃんと理解する｜getter/setter・props連携のパターンまで

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

const firstName = ref('太郎')
const lastName = ref('山田')

// フルネームを算出
const fullName = computed(() => `${lastName.value} ${firstName.value}`)
</script>

<template>
  <p>{{ fullName }}</p> <!-- 山田 太郎 -->
</template>

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

const count = ref(0)

// ❌ リアクティブではない：countが変わっても更新されない
const doubled = count.value * 2

// ✅ computedを使えばリアクティブに追従する
import { computed } from 'vue'
const doubledComputed = computed(() => count.value * 2)
</script>

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

const count = ref(0)

// メソッド：呼び出されるたびに毎回計算が走る
const doubledByMethod = () => count.value * 2

// computed：依存する値（count）が変わったときだけ再計算
const doubledByComputed = computed(() => count.value * 2)
</script>

<template>
  <!-- テンプレートで複数回呼ばれる場合、メソッドは毎回計算される -->
  <p>{{ doubledByMethod() }}</p>
  <p>{{ doubledByMethod() }}</p>

  <!-- computedはキャッシュされるので2回目以降は計算不要 -->
  <p>{{ doubledByComputed }}</p>
  <p>{{ doubledByComputed }}</p>
</template>

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

const price = ref(1000)
const tax = ref(0.1)

// getter のみのcomputed（読み取り専用）
const totalPrice = computed(() => Math.floor(price.value * (1 + tax.value)))
</script>

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

const firstName = ref('太郎')
const lastName = ref('山田')

const fullName = computed({
  // getter：値を読み取るときに呼ばれる
  get() {
    return `${lastName.value} ${firstName.value}`
  },
  // setter：値を書き込むときに呼ばれる
  set(newValue) {
    const parts = newValue.split(' ')
    lastName.value = parts[0]
    firstName.value = parts[1] ?? ''
  }
})
</script>

<template>
  <p>{{ fullName }}</p> <!-- 山田 太郎 -->
  <button @click="fullName = '鈴木 花子'">名前を変更</button>
  <!-- ボタンを押すとlastName='鈴木'、firstName='花子'に更新される -->
</template>

<script setup>
import { computed } from 'vue'

// 親からfirstNameとlastNameをそれぞれpropsで受け取る
const props = defineProps({
  firstName: {
    type: String,
    required: true
  },
  lastName: {
    type: String,
    required: true
  }
})

// 変更を親に通知するためのemit
const emit = defineEmits(['update:firstName', 'update:lastName'])

// 各propsに対してcomputedのgetter/setterを定義
const firstNameValue = computed({
  get() { return props.firstName },
  set(val) { emit('update:firstName', val) }
})

const lastNameValue = computed({
  get() { return props.lastName },
  set(val) { emit('update:lastName', val) }
})
</script>

<template>
  <div>
    <div>
      <label>姓</label>
      <input v-model="lastNameValue" type="text" placeholder="姓を入力" />
    </div>
    <div>
      <label>名</label>
      <input v-model="firstNameValue" type="text" placeholder="名を入力" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UserNameInput from './UserNameInput.vue'

const firstName = ref('太郎')
const lastName = ref('山田')
</script>

<template>
  <div>
    <h2>ユーザー情報編集</h2>

    <!--
      v-model:firstName="firstName" は内部的に以下と同等：
      :firstName="firstName" @update:firstName="firstName = $event"

      v-model:lastName="lastName" は内部的に以下と同等：
      :lastName="lastName" @update:lastName="lastName = $event"
    -->
    <UserNameInput
      v-model:firstName="firstName"
      v-model:lastName="lastName"
    />

    <p>現在の値：{{ lastName }} {{ firstName }}</p>
  </div>
</template>