watchEffect如何收集依赖：直接打印响应式对象也能触发依赖收集吗？

watchEffect依赖收集与直接打印reactive对象

本文探讨watchEffect在Vue3中收集依赖的机制，以及为什么直接打印reactive对象也能触发依赖收集的问题。

问题描述：

以下代码中，watchEffect监听obj对象的改变：

const obj = reactive({});
watchEffect(() => {
  console.log(obj);
});
obj.num = 3; // 触发watchEffect回调执行

疑问：通常reactive通过Proxy的get拦截器收集依赖。但这里只是打印obj，并未直接访问其属性，为何watchEffect仍能监听到obj的变化？

解答：

watchEffect的执行次数取决于其内部依赖的更新。在某些特定环境（例如某些在线代码编辑器或运行环境），由于编译器优化、运行时环境差异等因素，可能会出现watchEffect执行多次的情况。这并非watchEffect本身的机制问题，而是环境因素导致的异常行为。

在标准的Vue3项目中（本地开发环境或使用标准构建工具构建的项目），console.log(obj) 虽然没有直接访问obj的属性，但打印行为本身会触发reactive对象的get拦截器。这是因为console.log在内部会进行对象转换和属性访问，从而触发依赖收集。 因此，obj.num = 3 的赋值操作会使watchEffect重新执行。

总结：

watchEffect的依赖收集机制是基于reactive对象的Proxy拦截器。即使没有显式地访问reactive对象的属性，只要在watchEffect函数内部执行的操作间接地触发了get拦截器（例如打印对象），依赖就会被收集。 在一些非标准环境下观察到的异常行为，并非watchEffect机制本身的问题，而是环境因素导致的。 在标准的Vue3开发环境中，watchEffect的行为是符合预期的。