vue2.7.12中使用 watch 观察数组对象将会触发多次

2023-03-08

举个例子

最近某 @黄同学发现有这么一个奇怪的情况，使用 watch 监听数组的对象时，会 奇怪的多触发一遍。

本着找找原因的想法，于是他整出一个最小 demo 差不多类似于下面这样：

const combObj = ref({ a: 1, b: 2 });
const a = computed(() => obj.value.a);
watch([ref(), a], () => console.log('a'));
watch([shallowRef({}), a], () => console.log('b'));
watch([reactive({}), a], () => console.log('c'));
watch([a], () => console.log('d'));
watch(a, () => console.log('e'))
combObj.value = { ...combObj.value, b: 3 }

对于上面这个例子大家可以先用自己的 vue 知识推理一下，正确的结果是什么?

相信大家很快就会得出下面这个结论：

watch [ref, computed] 这个行为很好理解，ref 当作常量，computed 因为前后没改，所以 直接不触发
watch [shallowRef, computed] 由于 shallowRef 的特殊性，修改后我们不认为是只有对象本身被修改，所以应该 会触发。
watch [reactive, computed] 由于 reactive 的特殊性，不论多么深层的修改，我们都应该把整个对象的变化视作不同对象，所以 应该触发。
watch([computed]) 啥都没改，不触发
watch(computed) 啥都没改，不触发

诶执行一下，怎么第一个触发了！

看到某黄同学发来的视频，我满头问号 ❓ ❓ ❓。是我对 vue 的理解出了偏差？再次拿着下面的例子试了一下确实是这样的：

很是不服气的我，当场掏出的源码一探究竟。

源码

看起来一切正常的代码

新版本的 vue（2.7.0）经过了一顿调整以后，整个代码结构清楚了许多，所以经常 “逛” vue 源码的我，很快就熟练的点开了 https://github.com/vuejs/vue/blob/main/src/v3/apiWatch.ts 然后飞快的定位到了 154 行 doWatch。

这里和不熟悉的同学简单介绍一下 watch 的流程，事实上 watch 比明面上做的事情要多的多，但是本质上，他就是一个代理层，桥接了底层的 watcher 和 dep，所以只需要看他的 前置处理步骤 是怎么样的。

首先他会按照不同的传入值构造一个 getter，然后丢入 watcher，然后在 watcher 每次 run 的时候（watch在触发 update 的时候，会运行 run）检测一下值有没有修改，有修改就调用 callback 即可，顺带做一下回收。

所以入口这边 getter 的构造就比较重要了，大致分为以下几种：

ref

如果传入值是个 ref 就会直接构造获取 value

这很好理解嘛，和一般的逻辑没啥两样，显然和我们要找的问题 一毛钱关系都没。

reactive

reactive 也比较好理解，直接监听，并自动设置 deep 即可，在说的难听一点，本来 vue2.7 的 reactive 就是一个心智负担重，略有残缺的实现，所以 光靠普普通通的 watch 可没法正常工作，所以需要 hack 里面 define 的 __ob__ 去 主动的 depend，这个本质是个触发器，篇幅所限，这里不多赘述，知乎上大把的介绍就不献丑了。