浅谈Vuejs中nextTick()异步更新队列源码解析


Posted in Javascript onDecember 31, 2017

vue官网关于此解释说明如下:

vue2.0里面的深入响应式原理的异步更新队列

官网说明如下:

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

例如,当你设置 vm.someData = ‘new value' ,该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如

源码解析

方法原型以及解析注释如下:

var nextTick = (function () {
    var callbacks = []; // 存储需要触发的回调函数
    var pending = false; // 是否正在等待的标识(false:允许触发在下次事件循环触发callbacks中的回调, true: 已经触发过,需要等到下次事件循环)
    var timerFunc; // 设置在下次事件循环触发callbacks的 触发函数

    //处理callbacks的函数
    function nextTickHandler () {
      pending = false;// 可以触发timeFunc
      var copies = callbacks.slice(0);//复制callback
      callbacks.length = 0;//清空callback
      for (var i = 0; i < copies.length; i++) {
        copies[i]();//触发callback回调函数
      }
    }

    //如果支持Promise,使用Promise实现
    if (typeof Promise !== 'undefined' && isNative(Promise)) {
      var p = Promise.resolve();
      var logError = function (err) { console.error(err); };
      timerFunc = function () {
        p.then(nextTickHandler).catch(logError);
        // ios的webview下,需要强制刷新队列,执行上面的回调函数
        if (isIOS) { setTimeout(noop); }
      };

      //如果Promise不支持,但是支持MutationObserver(h5新特性,异步,当dom变动是触发,注意是所有的dom都改变结束后触发)
    } else if (typeof MutationObserver !== 'undefined' && (
        isNative(MutationObserver) ||
        // PhantomJS and iOS 7.x
        MutationObserver.toString() === '[object MutationObserverConstructor]'
      )) {
      // use MutationObserver where native Promise is not available,
      // e.g. PhantomJS IE11, iOS7, Android 4.4
      var counter = 1;
      var observer = new MutationObserver(nextTickHandler);
      //创建一个textnode dom节点,并让MutationObserver 监视这个节点;而 timeFunc正是改变这个dom节点的触发函数
      var textNode = document.createTextNode(String(counter));
      observer.observe(textNode, {
        characterData: true
      });
      timerFunc = function () {
        counter = (counter + 1) % 2;
        textNode.data = String(counter);
      };
    } else {// 上面两种不支持的话,就使用setTimeout

      timerFunc = function () {
        setTimeout(nextTickHandler, 0);
      };
    }
    //nextTick接受的函数, 参数1:回调函数 参数2:回调函数的执行上下文
    return function queueNextTick (cb, ctx) {
      var _resolve;//用于接受触发 promise.then中回调的函数
      //向回调数据中pushcallback
      callbacks.push(function () {
        //如果有回调函数,执行回调函数
        if (cb) { cb.call(ctx); }
        if (_resolve) { _resolve(ctx); }//触发promise的then回调
      });
      if (!pending) {//是否执行刷新callback队列
        pending = true;
        timerFunc();
      }
      //如果没有传递回调函数,并且当前浏览器支持promise,使用promise实现
      if (!cb && typeof Promise !== 'undefined') {
        return new Promise(function (resolve) {
          _resolve = resolve;
        })
      }
    }
  })();

 我在注释中解释了nextTick()函数的逻辑

上面处理回调的三个方式的使用优先级的原因:因为Promise和MutationObserver和触发的事件在同一个事件循环里面(只不过是运行在微观队列里面),但是setTimeout的回调函数是运行在下次时间循环里面。

优先使用Promise的原因是MutationObserver在ios9.3.3以上版本的UIWebview中运行一段时间后就停止了。
上面代码的注释已经完全说明了代码逻辑。简单理解:将callback 推到队列里面,如果还没有执行过在下次事件循环执行触发callback函数。

注意: 如果使用nextTick()不设置回调函数,而是使用Promise的方式设置回调函数,里面this并不是指向当前的Vue实例,而是指向window(严格模式是undefined);
但是通过上面的分析可知:执行上下文是通过Promise.then()里的回调函数的第一个参数传递的。

nextTick()被使用的地方

1、他是全局Vue的一个函数,因此我们可以通过vue直接调用。

2、Vue系统中,用于处理dom更新的操作

Vue中有一个watcher,用于观察数据的变化,然后更新dom。前面我们就知道Vue里面不是每一次数据改变都会触发更新dom,而是将这些操作都缓存在一个队列,在一个事件循环结束之后,刷新队列,统一执行dom更新操作。

function queueWatcher (watcher) {
    var id = watcher.id;
    if (has[id] == null) {
      has[id] = true;
      if (!flushing) {
        queue.push(watcher);
      } else {
        // if already flushing, splice the watcher based on its id
        // if already past its id, it will be run next immediately.
        var i = queue.length - 1;
        while (i >= 0 && queue[i].id > watcher.id) {
          i--;
        }
        queue.splice(Math.max(i, index) + 1, 0, watcher);
      }
      // queue the flush
      if (!waiting) {
        waiting = true;
        nextTick(flushSchedulerQueue);
      }
    }
  }

简单说明上面代码的逻辑,因为是watcher那里的代码,以后会分析到。这里nextTick()的作用,是在此次事件循环结尾的时候刷新watcher检查的dom更新操作。

3、局部Vue触发$nextTick(),在dom更新后执行相应逻辑。

Vue.prototype.$nextTick = function (fn) {
  return nextTick(fn, this)// 设置nextTick回调函数的上下文环境是当前Vue实例
};

上面是renderMinxin中的一段代码,也就是render模块初始化的代码。

总结

如果不了解它的代码,我们会产生理解误区。

1、nextTick()并不会重绘当前页面,并且它也不是在页面重绘才执行,而是在此次事件循环结束后一定会执行的。

2、此方法的触发并不是在页面更新完成才执行,第一条已经说了,但是为什么能在此方法中取到更新后的数据,那是因为dom元素的属性已经在watcher执行flush队列的时候改变了,因此是可以在此时获取的。

证明上述观点的实例:

h5有一个方法requestFrameAnimation(callback),此方法的回调是在页面重绘之前调用。通过实验,更新dom,nextTick()在此方法之前执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 #Javascript
ReactNative实现Toast的示例
Dec 31 #Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 #Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 #Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
React数据传递之组件内部通信的方法
Dec 31 #Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 #Javascript
You might like
apache+php+mysql安装配置方法小结
2010/08/01 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
php格式化日期实例分析
2014/11/12 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
python代码制作configure文件示例
2014/07/28 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
查看Django和flask版本的方法
2018/05/14 Python
详解numpy的argmax的具体使用
2019/05/27 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Python爬虫开发与项目实战
2020/12/16 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
计算机售后服务承诺书
2014/05/30 职场文书
公司证明怎么写
2014/09/22 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android