今天筆者將接續之前的內容，繼續了解 Vue.js 的功能與用法。那麼就讓我們直接開始今日的文章吧！

計算屬性 Computed Property

有時我們的變數資料將會跟著某個值一起變動，那麼我們會需要在每次使用前再去做判斷嗎？或者每隔一段時間去更新這個變數嗎？有個好消息，Vue.js 有一個特別的資料屬性，專門用來存這種需要經過計算的變數之值，這個特別的屬性便是 computed()，我們將用於判斷的函式（需要有回傳值，而這個值將會存於變數之中）作為參數傳給它，這個物件便會自動將一切工作處理好，也會在相關變數的值改變時跟著做出計算的。

下面是一個簡單的待辦清單，左邊的框框(checkbox)用來表示事情是否完成，並將其值存入 todo 的 done 變數，而上面的按鈕將會用來改變是否要隱藏已完成事件(hideCompleted)的布林值，至於要顯示的項目，則利用v-for 迴圈來輪過一便。有一點特別的是，迴圈輪的是 filteredTodos，這個使用到了 computed() 的物件，並將於 hideCompleted 的值變動時跟著變更回傳的清單。

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

let id = 0
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])

const filteredTodos = computed(() => {
  return hideCompleted.value ? 
    todos.value.filter((t) => !t.done) :
  	todos.value
})
</script>

<template>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
  
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
    </li>
  </ul>
</template>

Watch 函式

除了Computed Property以外，我們也可以使用 watch()，讓此函式幫忙「注意」參數的狀態，並於其變動的時候呼叫指定的函式。下方的程式將會根據當下的 id 數值，改變取得的資料編號：

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

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()
watch(todoId, fetchData)
  
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>