在 Vue.js 中，watch 和 computed 都是用來響應數據變化的工具，但它們有不同的用途和機制。

• 目的: 計算屬性主要用來計算衍生數據，這些數據是基於其他響應式數據的。

• 特性:

缓存: computed 的值會被缓存，只有當其依賴的數據發生變化時才會重新計算。

純函数: computed 應該是一個純函数，不產生副作用。

返回值: computed 必須返回一個值，這個值會被用來更新视图。

目的: watch 主要用來監看數據的變化，並在數據變化時執行一些副作用。

特性:

异步操作: watch 可以執行异步操作，比如發送網絡請求、更新 DOM。

副作用: watch 可以產生副作用，比如修改其他數據。

回调函数: watch 接收一个回调函数，当监视的數據发生变化时，该回调函数会被调用。

使用場景:

監聽數據變化後執行异步操作，

比如：

輸入框輸入時，進行实时搜索

數據變化時，保存到本地存储

触发副作用，比如：

顯示/隐藏元素

开启/关闭动画

<template>
  <input v-model="inputValue" />
</template>

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

// 定义响应式数据
const inputValue = ref('')

// 监听 inputValue 的变化
watch(
  inputValue,
  (newValue, oldValue) => {
    console.log(`Input changed from "${oldValue}" to "${newValue}"`)
    // 发送网络请求
    fetchData(newValue)
  }
)

// 模拟发送网络请求的函数
function fetchData(value) {
  console.log('Fetching data for:', value)
  // 在这里执行实际的网络请求逻辑
}
</script>

• 我們希望除了更新 UI 顯示之外，還能觸發一些其他的動作，這些動作我們稱之為「副作用」。