通过vue的nextTick介绍猜测它的一些实现方式

140 阅读1分钟

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。 这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。

上述加粗的描述,不知道大家有没有想到一个常见的操作?没错,就是我们常说的防抖,无论事件在规定时间内被执行多少次,它都只会执行最后一次操作。代码如下:

function debounce(fn, time) {
    var timer;
    return function() {
        if (timer) {
            clearTimeout(timer)
            timer = null;
 
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
 
            timer = null;
            fn();
        }, time);
    }
}

Tip:纯属个人猜测,不一定正确