vue3 watch监听事件

vue3里watch的监听用法，跟vue2差别不小。事件最直观的监听感受是——你不再需要纠结deep:true到底写在哪了，因为写法整个变了。事件以前在options API里写watch，监听像在填表格；现在composition API里用watch，事件更像在写函数调用。监听

举个最简单的事件例子。你想监听一个ref定义的监听count变量：

const count = ref(0) watch(count, (newVal, oldVal) => {  console.log('count变了', newVal, oldVal) })

就这么直接。第一个参数传ref变量，事件第二个参数传回调。监听不用写'count'字符串，事件不用加this.$watch。监听这感觉就像从打电话变成了发微信——更直接了。事件

但真正有意思的监听是监听reactive对象。vue2里你得写deep:true才能监听到对象内部属性的变化，不然只有引用变了才触发。vue3里默认就是深度的，你直接监听整个对象就行：

const state = reactive({  user: {  name: '张三' } }) watch(state, (newVal) => {  console.log('state里任何东西变了', newVal.user.name) }) state.user.name = '李四' // 会触发

这省了不少事。不过有个坑——如果你只监听state.user，那当state.user整个被替换时才会触发，改name不会。所以写代码前得想清楚：你要监听的是引用变化，还是内部字段变化。

还有个常用的场景，监听多个数据。vue2里你得写数组或者写多个watch，vue3直接传数组给第一个参数：

const a = ref(1) const b = ref(2) watch([a, b], ([newA, newB], [oldA, oldB]) => {  console.log('a或b变了', newA, newB) })

回调参数也是数组解构出来的，一一对应。这比vue2的写法清爽多了，不用写一堆watch函数然后互相调用。

说到回调的第三个参数，vue3提供了onCleanup，用来处理异步竞态。比如你监听一个输入框值，每次变化都发请求，但响应顺序可能乱。你可以在上一次请求还没回来时，用onCleanup取消它：

watch(searchText, async (newText, oldText, onCleanup) => {  let cancelled = false onCleanup(() => {  cancelled = true }) const result = await fetch(`/api/search?q=${ newText}`) if (!cancelled) {  // 更新结果 } })

这比vue2里手动加flag或者用AbortController干净多了。以前你得在data里存个标志位，现在直接在watch内部处理。

还有那个immediate选项，vue2和vue3都有，但vue3里更常用——因为组合式api里你经常需要组件一创建就执行一次watch逻辑，比如初始化数据。写起来就是：

watch(source, callback, {  immediate: true })

不过要注意，immediate触发时oldVal是undefined。写代码时别假设oldVal一定存在，尤其做比较逻辑的时候。

最后说说watchEffect。跟watch不同，它不关心你监听谁，只要回调里用到了响应式数据，哪个变了就重新跑。适合做无脑同步操作：

const userId = ref(1) const userInfo = ref(null) watchEffect(async () => {  const id = userId.value userInfo.value = await fetchUser(id) })

userId一变，watchEffect自动重新执行。不用声明依赖，代码少写一半。但缺点是没法拿到oldVal，所以需要比较新旧值的场景还得用watch。

实际开发里，我习惯这样分：需要精确控制新旧值、需要防抖或节流时用watch；只是根据状态变化同步执行副作用，不管具体值是什么，用watchEffect。两种工具配合着用，基本能覆盖所有监听需求。