vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue异步更新

Vue手写实现异步更新详解

作者:夏日

这篇文章主要介绍了Vue手写实现异步更新详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助

前言:

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

收集去重后的watcher进行更新

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

看下之前完成的代码:

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

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

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

代码如下:

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.thenMutationObserversetImmediate ,如果这些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>

其输出结果如下:

在了解了$nextTick的具体实现后,我们详细分析下代码的执行流程:

到此这篇关于Vue手写实现异步更新详解的文章就介绍到这了,更多相关Vue异步更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文