使用 Promise 来修改响应式数据。 Promise 的位置会导致触发次数减少

Question

第一种方法

    const list = reactive([1, 2, 3, 4, 5]); 
    const handleClick = () =>{
        list.push(...[11, 12, 13, 14, 15]);
        list.push(...[16, 17, 18, 19, 20]);
        Promise.resolve().then(() => {
            list.push(33)
        });
        
    };

第二种方法

    const list = reactive([1, 2, 3, 4, 5]);
    const handleClick = ()=>{
        Promise.resolve().then(() => {
            list.push(33)
        });
        list.push(...[11, 12, 13, 14, 15]);
        list.push(...[16, 17, 18, 19, 20]);
    };

第一个函数会触发两次vue hooks

onUpdated

，但第二个函数会触发一次，谁能告诉我为什么，谢谢

Answer 1

因为

Vue

使用了基于

nextTick

的优化机制来批量更新。

在第一种方法中，您将一堆值推送到反应数组，这将触发

onUpdate

钩子一次。然后

Promise

在一个单独的周期中解决，这将再次触发

onUpdate

。

但在第二种方法中，

Promise

在

push

操作之前解析。然后代码将更多值推送到数组中。 Vue 的反应机制会检测到这一点，并在一次滴答内完成所有操作。这只会触发

onUpdate

钩子一次。

更多细节： 为什么当两个反应数据突变超级接近时，Vue 只会更新一次？