商品數量改了，小計卻還停在舊數字，通常是把「可算出來的資料」也存成另一份狀態。Vue 的 computed 適合處理這種衍生值：保留單價與數量，讓小計跟著它們變化。
小計不用另外存一份
以下寫法以已建立的Vue 3專案為前提：第一段放在單檔元件的 <script setup>，輸入與顯示片段放在同一元件的 <template>。它不是貼進普通HTML就能執行的完整頁面。
用一件單價150元的示例商品，數量從2改成5，小計就應從300變成750。只保留數量這個可變來源，會比每次同時修改「數量」和「小計」更不容易漏更新。
import { ref, computed } from 'vue';
const price = 150;
const quantity = ref(2);
const subtotal = computed(() => price * quantity.value);
在JavaScript中把 quantity.value 改成5，subtotal.value 就會得到750；這是讀值示例，不必在初始化時另寫賦值把數量強制改成5。
在 JavaScript 裡讀取 ref 與 computed 用 .value；模板會自動解包，因此可以寫 {{ subtotal }}。這裡的150元只是計算例子，不是本站商品價格。
模板顯示結果，輸入先轉成數字
<label>數量
<input type="number" min="0" step="1"
:value="quantity"
@input="quantity = Math.max(0, Number($event.target.value) || 0)">
</label>
<p>小計：{{ subtotal }} 元</p>這個簡單演示把空白或無效數字轉成0，並避免負數。正式購物流程還要處理整數數量、庫存、價格精度與伺服器驗證，不能只靠輸入框的 min 或前端小計決定收款金額。
computed、方法與 watch 怎麼選？
只想從現有資料得到結果，例如小計、篩選後的商品或顯示文字，先考慮 computed。它會根據響應式依賴快取結果，依賴沒有變時不必重新計算。
普通方法適合需要傳入參數、或在呼叫時執行的工作。watch 則常用在資料變動後要做別的事，例如發出請求；不要為了顯示一個可直接算出的數字，先用 watch 再同步另一份小計。
computed 的 getter 保持純計算：不發網路請求、不修改其他狀態，也不在裡面操作 DOM。預設的 computed 是唯讀衍生值，想改結果應改它的來源，而不是直接覆寫小計。
確認更新時，順便查兩個容易忽略的地方
若數量改了卻沒更新，先看來源是不是響應式資料，以及計算中是否真的讀到該來源。把數值在外面先取出成普通變數，再拿那個舊變數計算，就不會自動跟著 ref 變動。
這個小計例子沒有連接訂單、付款或庫存 API。先在測試頁改幾個數量，確認畫面與計算一致；整合正式流程時，後端仍要重新核價。撤回則還原該元件，不必更動全站設定。
參考資料
Vue 3資料核對於2026年10月3日；示例金額不是正式商品定價。
評論0