vm.$nexttick实现原理

最新推荐文章于 2023-12-20 20:12:29 发布

原创最新推荐文章于 2023-12-20 20:12:29 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue 专栏收录该内容

6 篇文章

订阅专栏

1.nexttick用法

nexttick接受一个回调函数作为参数，它的作用是将回调延迟到下个DOM更新周期之后执行。它与全局方法Vue.nexttick一样，不同的是回调的this自动绑定到调用它的实例上。如果没有提供回调且在支持Promise的环境中。则返回一个Promise

下个DOM更新周期的含义

在Vue中，当状态发生变化时，watcher会得到通知，然后触发虚拟DOM的渲染流程，而watcher触发渲染是异步的，每当需要渲染时，会将watcher推送到这个队列中，在下一次事件循环中再让watcher触发渲染的流程。

vue使用异步更新队列的原因

vue2.0开始使用虚拟DOM进行渲染，变化侦测的通知只发送到组件，组件内用到的所有状态的变化都通知到同一个watcher，然后虚拟DOM会对整个组件进行比对并更改DOM。同一事件循环中，如果有两个数据发生变化，也只会渲染一次。vue的实现方式是将收到通知的watcher实例到队列中缓存起来，并在添加之前检查是否有相同的watcher。

//callbacks存储用户用户注册的回调
const callbacks = []
//pending用来标识是否需要向任务队列中添加一个任务
let pending = false
//将callbacks中的所有函数依次执行，然后清空callbacks
function flushCallbacks () {
    pending = false
    const copies = callbacks.slice(0)
    callbacks.length = 0
    for(let i = 0; i < copies.length; i++) {
        copies[i]()    
    }
}
//使用promise.then将flushCallbacks添加到微任务队列中
let microTimerFunc
const p = Promise.resolve()
microTimerFunc = () => {
    p.then(flushCallbacks)
}

let useMacroTask = false

export function withMacroTask(fn) {
    return fn._withTask || (fn._withTask = function() {
        useMacroTask = true;
        return res
    })
}
export function nextTick (cb, ctx) {
    callbacks.push(() => {
        if(cb) {
            cb.call(ctx)
        }
    })
    if(!pending) {
        pending = true;
        if(useMacroTask) {
            macroTimerFunc();
        } else {
            microTimerFunc();
        }
    }
}

nextTick中的执行回调列表的任务只会向任务队列中添加一次，不会重复添加。因为加入任务队列的任务只需要执行一次，就可以将本轮时间循环中使用nextTick方法注册的回调都执行一遍。

withMacroTask函数，它的作用是给回调函数做一层包装，保证在整个回调函数的过程中，如果修改了状态，那么更新DOM的操作会被推入到宏任务队列中。更新DOM的执行时间会晚于回调函数的执行时间。

vue优先使用setImmediate,但是它存在兼容性问题，只能在IE中使用，所以使用MessageChannel作为备选方案，如果浏览器也不支持，最后使用setTimeout来将回调添加到宏任务队列中。

macroTimeFunc被执行时，会将flushCallbacks添加到宏任务队列中。

当浏览器不支持promise的时候，会自动降级为macroTimerFunc