Day11 - Vue.js 的黑魔法：Watch

備註

本站 Vue 的撰寫風格都是 Composition API

2025 Vue 直播班每日任務，藉由一天學一點積沙成塔

Watch 的基本語法

watch(source, callback, [options])

source 要監聽的資料 (可以是 ref、reactive、computed 或函式)
callback 會接收兩個參數：
- newValue : 變動後的新值
- oldValue : 變動前的舊值
options (可選)
- immediate: true：監聽建立後，先執行一次 callback
- deep: true：如果是物件或陣列，內部屬性也會觸發監聽

Topic

操作提供的模版，執行以下要求（只能操作 Script 的部分）：

請利用 watch 的方式，替「購買人姓名」的 input 加上欄位驗證，需合下面條件：條件：名稱欄位需要剛好三個字，否則就顯示「需要正確的輸入名稱」的紅字提示。

<template>
  <div>
    <form>
      <div class="m-5">
        <label for="username">購買人姓名：</label>
        <input id="username" v-model="user.username" />
        <span v-if="errors.username">{{ errors.username }}</span>
      </div>
    </form>
  </div>
</template>

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

const user = ref({
  username: '',
});

const errors = ref({
  username: '',
});

</script>
<style>
span {
  color: red;
  font-size: 0.8em;
}
</style>

Result

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

const user = ref({
  username: '',
});

const errors = ref({
  username: '',
});

watch(() => user.value.username, (newUsername) => {
  if(newUsername.length < 3) {
    errors.value.username = '請至少輸入三個字元'
  }else {
    errors.value.username = '';
  }
})
</script>

思考與反饋

這裡一開始我直接抓了 username 屬性：watch(username, (newUsername))，然後就出現 not defined 的錯誤，
就算知道要加上 .value 也很容易錯寫成：user.username.value，
watch 監聽的是一整個物件(或陣列)，所以 source 這邊應該寫的是取得 user 的物件裡面的 username。

或是寫成：

watch(() => user.value, (newUsername) => {
  // ...
}, { deep: true })

去監聽物件內部的所有屬性

學習的地方

範例任務是將價格加總，我就問了 Gemini 常見的情境有哪些，然後試著練習了常見的篩選功能的寫法

CODE

連結到 Codepen

Watch 的基本語法​

Topic​

Result​

思考與反饋​

學習的地方​

CODE​