Vue2.0 nextTick 原理实现简易版

最新推荐文章于 2024-06-19 11:53:27 发布

稞结

最新推荐文章于 2024-06-19 11:53:27 发布

阅读量252

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/qq_33152667/article/details/105495381

版权

本文通过代码示例逐步分析Vue2.0中nextTick的原理，利用setTimeout模拟实现。介绍如何在数据变更时，将watcher放入队列，并通过watcherId过滤重复，确保更新方法只执行一次。内容参考自《剖析 Vue.js 内部运行机制》。

摘要由CSDN通过智能技术生成

先贴代码

let index = 0;
let watcherId = 0; // watcher标识
let hasWatcher = {}; // 将id为1的watcher加入queue，便是{1:true}
let queue = []; // 存放watcher
let waiting = false;

function nextTick (cb) {
    setTimeout(cb, 2000);
}

class Watcher { 
    constructor () {
        this.id = ++watcherId;
    }

    update () {
        console.log('Watcher' + this.id + ' update');
        watcherToQueue(this); // 将当前watcher放入队列中
    }

    run () {
        console.log('Watcher' + this.id + '视图更新啦～');
    }
}

function watcherToQueue(watcher) {
    const id = watcher.id;
    if (hasWatcher[id] == null) {
        hasWatcher[id] = true;
        queue.push(watcher);
        if (!waiting) {
            waiting = true;
            nextTick(queueWatcherRun); 
        }
    }
}

function queueWatcherRun () {
  let watcher, id;
  for (index = 0; index <