Vue 侦听器（watch 与 watchEffect）全解析1

在 Vue 组合式 API 中，当我们需要在响应式状态变化时执行“副作用”（如操作 DOM、发起异步请求、修改其他状态等），watch 和 watchEffect 是核心工具。它们能帮我们精准捕获状态变化并触发对应逻辑，但用法和适用场景各有不同。下面从基础用法到高级特性，全面解析两者的使用规则与细节。

一、watch：精准侦听指定数据源

watch 函数的核心特点是“精准控制”：需要明确指定要侦听的“数据源”，且仅当数据源变化时才触发回调。它适用于需要知道“旧值”“新值”，或需手动控制侦听目标的场景。

1. 基本用法（示例解析）

先从官方示例理解 watch 的基础逻辑：

<script setup>
import { ref, watch } from 'vue'const question = ref('') // 响应式状态：绑定输入框的问题
const answer = ref('Questions usually contain a question mark. ;-)') // 响应式状态：答案
const loading = ref(false) // 响应式状态：加载状态// 侦听 question 的变化：当 question 改变时，执行回调
watch(question, async (newQuestion, oldQuestion) => {//