为什么这种情况 vue3 watchEffect 会触发？

Question

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

reactive 收集依赖不是要通过 Proxy 触发 get 吗，为什么这里只是打印 obj（没有触发 get），也能够收集到依赖？

Answer 1

正常应该是执行一次
奇怪的是你给的链接的确是执行了两次，可能是因为在线环境奇怪的原因
我本地创建的项目，和使用在线 vite 创建的项目都是执行一次（在线连接：https://stackblitz.com/edit/vitejs-vite-mgdshp?file=src%2FApp...）

Answer 2

watchEffect 再创建侦听器的时候就会触发一次回调，和你改不改 obj.num 没有关系，后续才会根据收集的依赖是否有改变来判断是否需要执行回调。所以初次执行的时候打印一次是正常的，如果是初始化的时候就执行了两次，那么你要检查一下是不是代码的其他地方异步修改了数据，总之，并不是因为这里修改了 obj.num。

Answer 3

<template>
  <div id="app">1</div>
</template>

<script>
import { reactive, watchEffect } from 'vue';

export default {
  name: 'App',
  setup() {
    const obj = reactive({});
    let n = 0;
    watchEffect(() => {
      console.log("n:", n, "obj:", obj);
    });
    n += 1;
    obj.xxx = 3;
  },
};
</script>

<style></style>

你这打印不是正常的吗？首次加载会触发，以及下面 obj.xxx = 3 也会导致触发一次。前后总共2次，不是很正常？