vue之nextTick全面解析

vue的第一篇文章，介绍一下简单的nextTick方法的实现原理

简介

vue是很是流行的框架，他结合了angular和react的优势，从而造成了一个轻量级的易上手的具备双向数据绑定特性的mvvm框架。本人比较喜欢用之。在咱们用vue时，咱们常常用到一个方法是this.$nextTick，相信你也用过。我经常使用的场景是在进行获取数据后，须要对新视图进行下一步操做或者其余操做时，发现获取不到dom。由于赋值操做只完成了数据模型的改变并无完成视图更新。在这个时候咱们须要用到本章介绍的函数。

为何要用nextTick

请看以下一段代码

new Vue({
  el: '#app',
  data: {
    list: []
  },
  mounted: function () {
    this.get()
  },
  methods: {
    get: function () {
      this.$http.get('/api/article').then(function (res) {
        this.list = res.data.data.list
        // ref  list 引用了ul元素，我想把第一个li颜色变为红色
        this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
      })
    },
  }
})

我在获取到数据后赋值给数据模型中list属性，而后我想引用ul元素找到第一个li把它的颜色变为红色，可是事实上，这个要报错了，咱们知道，在执行这句话时，ul下面并无li，也就是说刚刚进行的赋值操做，当前并无引发视图层的更新。所以，在这样的状况下，vue给咱们提供了$nextTick方法，若是咱们想对将来更新后的视图进行操做，咱们只须要把要执行的函数传递给this.$nextTick方法，vue就会给咱们作这个工做。

源码解读

这个函数很简单，vue2.2.6版本 450行开始。

首先，这个函数是采用了一个单利模式仍是什么建立的一个闭包函数

var callbacks = [];   // 缓存函数的数组
var pending = false;  // 是否正在执行
var timerFunc;  // 保存着要执行的函数

首先定义了一些变量供以后使用，下面是一个函数

function nextTickHandler () {
  pending = false;
  //  拷贝出函数数组副本
  var copies = callbacks.slice(0);
  //  把函数数组清空
  callbacks.length = 0;
  // 依次执行函数
  for (var i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

这个函数就是$nextTick内实际调用的函数。

接下来，是vue分了三种状况来延迟调用以上这个函数，由于$nextTick目的就是把传进来的函数延迟到dom更新后再使用，因此这里依次优雅降序的使用js的方法来作到这一点。

1. promise.then延迟调用

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve();
  var logError = function (err) { console.error(err); };
  timerFunc = function () {
    p.then(nextTickHandler).catch(logError);
    if (isIOS) { setTimeout(noop); }
  };
}

若是浏览器支持Promise，那么就用Promise.then的方式来延迟函数调用，Promise.then方法能够将函数延迟到当前函数调用栈最末端，也就是函数调用栈最后调用该函数。从而作到延迟。

2. MutationObserver 监听变化

else if (typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {

  var counter = 1;
  var observer = new MutationObserver(nextTickHandler);
  var textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true
  });
  timerFunc = function () {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
}

MutationObserver是h5新加的一个功能，其功能是监听dom节点的变更，在全部dom变更完成后，执行回调函数。

具体有一下几点变更的监听

• childList：子元素的变更
• attributes：属性的变更
• characterData：节点内容或节点文本的变更
• subtree：全部下属节点（包括子节点和子节点的子节点）的变更

能够看出，以上代码是建立了一个文本节点，来改变文本节点的内容来触发的变更，由于咱们在数据模型更新后，将会引发dom节点从新渲染，因此，咱们加了这样一个变更监听，用一个文本节点的变更触发监听，等全部dom渲染完后，执行函数，达到咱们延迟的效果。

3.setTimeout延迟器

else {
    timerFunc = function () {
      setTimeout(nextTickHandler, 0);
    };
  }

利用setTimeout的延迟原理，setTimeout(func, 0)会将func函数延迟到下一次函数调用栈的开始，也就是当前函数执行完毕后再执行该函数，所以完成了延迟功能。

闭包函数

  return function queueNextTick (cb, ctx) {
    var _resolve;
    callbacks.push(function () {
      if (cb) { cb.call(ctx); }
      if (_resolve) { _resolve(ctx); }
    });
    // 若是没有函数队列在执行才执行
    if (!pending) {
      pending = true;
      timerFunc();
    }
    // promise化
    if (!cb && typeof Promise !== 'undefined') {
      console.log('进来了')
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
  }

这个return的函数就是咱们实际使用的闭包函数，每一次添加函数，都会想callbacks这个函数数组入栈。而后监听当前是否正在执行，若是没有，执行函数。这个很好理解。下面一个if是promise化。

this.$nextTick(function () {

})
// promise化
this.$nextTick().then(function () {

}.bind(this))

以上代码中第二种写法咱们不常见把，直接调用$nextTick函数而后用promise格式去书写代码，不过这个then里面须要手动绑定this，vue内部没有给作处理。

结尾

这就是一个this.$nextTick的实现，其中利用了优雅降序的巧妙手法，使代码尽量优化。并且还提供了promise的写法，虽然咱们不常常用，可是有总比没有好。