为什么 响应式数据被重新赋值了三次，但是监听回调只执行了一次

const { createApp } = Vue
const app = createApp({
    components: [],
    template: `
    <div>
        <button @click="handleClick">toggle</button>
    </div>
    `,
    data() {
        return {
            visible: false,
            test: 1,
        }
    },
    methods: {
        handleClick() {
            this.visible = true;
            this.visible = false;
            this.visible = true;
        },
    },
    watch: {
        visible(v) {
            console.log('visible change', v)
        },
    }
}).mount('#app')

上述代码点击toggle后的效果如下图。visible change只log了一次。

为什么 响应式数据被多次修改，但是监听回调只执行了一次呢？

Vue 通过实例化 ReactiveEffect ，监听getter的改变，回调scheduler。通过这种方式去劫持 visible 的更改。

// packages\runtime-core\src\apiWatch.ts
let scheduler: EffectScheduler
if (flush === 'sync') {
    scheduler = job as any
} else if (flush === 'post') {
    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
} else {
    job.pre = true
    if (instance) job.id = instance.uid
    scheduler = () => queueJob(job)
}

const effect = new ReactiveEffect(getter, scheduler) 
// getter在本场景中对应visible。scheduler会在getter更改时被调用

代码 1 执行后， visible 设置为 true 。Vue 监听到 visible 的更改。执行 queueJob ，将负责执行回调函数的 job 推入 queue 。并利用 Promise.then 的回调函数会被放入微任务队列的特性，使用 then 将执行 queue 中所有方法的任务放入微任务队列中。

// packages\runtime-core\src\scheduler.ts
export function queueJob(job: SchedulerJob) {
  // 检查queue是否为空、job是否存在queue中
  if (
    !queue.length ||
    !queue.includes(
      job,
      isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
    )
  ) {
    if (job.id == null) {
      queue.push(job)
    } else {
      queue.splice(findInsertionIndex(job.id), 0, job)
    }
    queueFlush()
  }
}
function queueFlush() {
  if (!isFlushing && !isFlushPending) {
    isFlushPending = true
    currentFlushPromise = resolvedPromise.then(flushJobs) // flushJobs进入微任务
  }
}

代码 2 执行后， visible 设置为 false。Vue 知道 visible 更改后，发现 负责 visible 更新时回调的 job 已经推入 queue，于是不再继续执行推入操作。

代码 3 执行后，visible 设置为 true。后面同上，不再继续执行推入操作。

handleClick 执行完毕。事件循环机制会去执行微任务队列的任务。然后代码1执行后放入微任务队列中的 job 得到了执行，回调函数也得到了执行。

综上所述，job因为只推入1次，所以只执行了一次，监听回调也只执行了一次。