＜ 前の記事
watchDebounced（値の監視）
［Vue.js］computed（再計算）
公開日：2026-02-24
更新日：2026-02-24
更新日：2026-02-24
1. 概要
computed で指定された関数内の ref に変更があった場合、関数を再実行します。
動作確認：Vite 7.3.1、Vue.js 3.5.25
動作確認：Vite 7.3.1、Vue.js 3.5.25
2. サンプル１
2.1 コード
index.html と src/main.ts は、「Hello, World」で作成したものを使用します。
src/App.vue
実行結果
src/App.vue
コード
<script setup lang="ts">
import { ref, computed } from 'vue'
const value1 = ref(0)
const value2 = ref(0)
const result = computed(() => {
console.log('computed');
return Number(value1.value) + Number(value2.value);
});
</script>
<template>
<input type="text" v-model="value1" /><br />
<input type="text" v-model="value2" /><br />
<p>結果：{{ result }}</p>
</template>実行結果
2.2 説明
一番最初に {{ result }} に来た時に、computed() に指定した関数が実行されます。
この時、関数で使用された ref が、変更があった時に再計算が必要になる ref として登録されます。
また、関数の戻り値がキャッシュされて、もし ref の変更がない時に再レンダリングされた場合は、キャッシュの値が使用されます。
この時、関数で使用された ref が、変更があった時に再計算が必要になる ref として登録されます。
また、関数の戻り値がキャッシュされて、もし ref の変更がない時に再レンダリングされた場合は、キャッシュの値が使用されます。
3. サンプル２ － computed の setter
3.1 コード
src/App.vue
実行結果
コード
<script setup lang="ts">
import { ref, computed } from 'vue';
const price = ref(0);
const taxIncluded = computed({
get: () => {
console.log('getter');
return Math.round(price.value * 1.1);
},
set: (newValue: string | number) => {
console.log('setter');
const num = typeof newValue === 'string' ? Number(newValue) : newValue
if (!isNaN(num)) {
price.value = Math.round(num / 1.1);
}
}
})
</script>
<template>
<label>税抜価格：<input type="number" v-model.number="price" /></label><br />
<label>税込価格：<input type="number" v-model.number="taxIncluded" /></label><br />
</template>実行結果
3.2 説明
上記のサンプルは、
税抜価格を入力すると、税込価格が自動的に計算され、
税込価格を入力すると、税抜価格が自動的に計算されます。
税込価格の v-model には、computed のオブジェクトが指定されており、入力すると、computed の setter が実行されます。
この時、price.value に税込価格を設定していますが、price.value は taxIncluded の getter で使用しているため、
price.value に値を設定すると、computed の getter が呼ばれます。
税抜価格は ref により再表示されますが、税込価格も再表示されることに注意してください。
ちなみに v-model.number は、入力値を数値に変換してモデルに設定します。
税抜価格を入力すると、税込価格が自動的に計算され、
税込価格を入力すると、税抜価格が自動的に計算されます。
税込価格の v-model には、computed のオブジェクトが指定されており、入力すると、computed の setter が実行されます。
この時、price.value に税込価格を設定していますが、price.value は taxIncluded の getter で使用しているため、
price.value に値を設定すると、computed の getter が呼ばれます。
税抜価格は ref により再表示されますが、税込価格も再表示されることに注意してください。
ちなみに v-model.number は、入力値を数値に変換してモデルに設定します。
＜ 前の記事
watchDebounced（値の監視）
