Vue手写实现异步更新详解

Jade ·

更新时间:2024-09-20

· 195 次阅读

收集去重后的watcher进行更新

实现nextTick方法

测试demo详解

前言：

本文将详细讲解具体的更新过程，并手写实现Vue的异步更新逻辑相关代码。

收集去重后的watcher进行更新

这里先回顾一下依赖收集的相关知识：

页面首次挂载，会从vm实例上获取data中的值，从而调用属性的get方法来收集watcher

当vm实例上的属性更新它的值时，会执行收集到的watcher的update方法

看下之前完成的代码：

class Watcher {
  // some code ...
  update () {
    // 直接执行更新操作
    this.get()
  }
}

那么watcher的update到底应该如何被执行呢？这就是本文的重点。

watcher的更新操作主要分为如下俩步：

将watcher去重后放到队列中

在异步任务中执行存放的所有watcher的run方法

代码如下：

class Watcher {
  // some code
  update () {
    queueWatcher(this);
  }
  run () {
    this.get();
  }
}
export default Watcher;
let queue = [];
let has = {}; // 使用对象来保存id，进行去重操作
let pending = false; // 如果异步队列正在执行，将不会再次执行
function flushSchedulerQueue () {
  queue.forEach(watcher => {
    watcher.run();
    if (watcher.options.render) { // 在更新之后执行对应的回调: 这里是updated钩子函数
      watcher.cb();
    }
  });
  // 执行完成后清空队列
  queue = [];
  has = {};
  pending = false;
}
function queueWatcher (watcher) {
  const id = watcher.id;
  if (!has[id]) {
    queue.push(watcher);
    has[id] = true;
    if (!pending) {
      pending = true;
      // 异步执行watcher的更新方法
      setTimeout(flushSchedulerQueue)
    }
  }
}

此时已经实现了视图的异步更新，但是Vue还为用户提供而了$nextTick方法，让用户可以在DOM更新之后做些事情。即$nextTick中的方法会在flushSchedulerQueue 执行后才能执行，下面就来看下$nextTick和视图更新之间的逻辑。

实现nextTick方法

在queueWatcher中其实并不是直接调用setTimeout来进行视图更新的，而是会调用内部的nextTick方法。为用户提供的$nextTick方法，也会调用nextTick方法。

该方法实现如下：

let callbacks = [];
let pending = false;
function flushCallbacks () {
  callbacks.forEach(cb => cb());
  callbacks = [];
  pending = false;
}
export function nextTick (cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    timerFunc();
  }
}

nextTick会接收一个回调函数，并将回调函数放到callbacks数组中，之后会通过timerFunc来异步执行callbacks中的每一个函数：

let timerFunc;
if (Promise) {
  timerFunc = function () {
    return Promise.resolve().then(flushCallbacks);
  };
} else if (MutationObserver) {
  timerFunc = function () {
    const textNode = document.createTextNode('1');
    const observer = new MutationObserver(() => {
      flushCallbacks();
      observer.disconnect();
    });
    const observe = observer.observe(textNode, { characterData: true });
    textNode.textContent = '2';
  };
} else if (setImmediate) {
  timerFunc = function () {
    setImmediate(flushCallbacks);
  };
} else {
  timerFunc = function () {
    setTimeout(flushCallbacks);
  };
}

timerFunc对异步API进行了兼容处理，分别会先尝试使用微任务Promise.then、MutationObserver、setImmediate ，如果这些API浏览器都不支持的话，那么会使用宏任务setTimeout。

在queueWatcher里我们将flushSchedulerQueue作为参数执行nextTick：

function queueWatcher (watcher) {
  const id = watcher.id;
  if (!has[id]) {
    queue.push(watcher);
    has[id] = true;
    if (!pending) {
      pending = true;
      nextTick(flushSchedulerQueue);
    }
  }
}

在Vue原型上，也要增加用户可以通过实例来调用的$nextTick方法，其内部调用nextTick：

Vue.prototype.$nextTick = function (cb) {
  nextTick(cb);
};

$nextTick会将用户传入的回调函数也放到callbacks中，通过异步API来执行。

测试demo详解

上面已经讲解了视图更新和$nextTick的实现代码，接下来写一个demo来实践一下。

下面是实际开发中可能会用到的一段代码：

<div id="app">{{name}}</div>
<script>
  const vm = new Vue({
    el: '#app',
    data () {
      return {
        name: 'zs'
      };
    }
  });
  vm.name = 'ls';
  console.log('$el', vm.$el);
  vm.$nextTick(() => {
    console.log('next tick $el', vm.$el);
  });
</script>

其输出结果如下：