侦听器 watch
侦听器（watch）在数据变化时执行副作用：发请求、操作本地存储、触发动画。它监听一个或多个响应式源，变化时运行回调，旧值新值都作为参数传入。
注意三个细节：监听 ref 直接写字段名；监听 reactive 对象的属性要写函数形式 () => obj.key；deep: true 深度监听嵌套变化，immediate: true 让回调立即执行一次。watchEffect 类似但自动收集依赖，适合不关心旧值的场景。
- watch 做副作用，computed 派生值——不要混用
- 监听 reactive 属性用 getter 函数：() => obj.key
- watchEffect 自动追踪依赖，立即执行一次，无需指定监听源
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>侦听器 watch</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <input v-model="keyword" placeholder="输入关键词"> <p>状态：{{ status }}</p> <button @click="count++">计数 {{ count }}</button> </div> <script> const { createApp, ref, reactive, watch, watchEffect } = Vue; createApp({ setup() { const keyword = ref(''); const count = ref(0); const status = ref('待命'); // 副作用：值变化时执行（新旧值都拿到） watch(keyword, (nv, ov) => { console.log('关键词从', ov, '变成', nv); status.value = nv ? '搜索中：' + nv : '待命'; }); // immediate：进入页面先执行一次 watch(count, (nv) => console.log('计数变为', nv), { immediate: true }); // watchEffect：自动收集依赖，立即执行 watchEffect(() => console.log('当前关键词长度：', keyword.value.length)); return { keyword, count, status }; } }).mount('#app'); </script> </body> </html>
本节要点watch 负责副作用、能拿到新旧值；watchEffect 自动追踪依赖立即执行；派生值还是用 computed。
