vue之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'
   })
  },
 }
})

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]();
 }
}

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); }
 };
}

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);
 };
}

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

 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;
   })
  }
 }

this.$nextTick(function () {

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

}.bind(this))