vue源码之批量异步更新策略的深入解析

更新时间：2021年05月14日 09:59:58 作者：MiemieWan

这篇文章主要给大家介绍了关于vue源码之批量异步更新策略的相关资料，关于vue异步更新是我们日常开发中经常遇到的一个功能，需要的朋友可以参考下

vue异步更新源码中会有涉及事件循环、宏任务、微任务的概念，所以先了解一下这几个概念。

一、事件循环、宏任务、微任务

1.事件循环Event Loop:浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而定制的工作机制。

2.宏任务Task: 代表一个个离散的、独立的工作单位。浏览器完成一个宏任务，在下一个宏任务开始执行之前，会对页面重新渲染。主要包括创建文档对象、解析HTML、执行主线JS代码以及各种事件如页面加载、输入、网络事件和定时器等。

3.微任务：微任务是更小的任务，是在当前宏任务执行结束后立即执行的任务。如果存在微任务，浏览器会在完成微任务之后再重新渲染。微任务的例子有Promise回调函数、DOM变化等。

执行过程：执行完宏任务 => 执行微任务 => 页面重新渲染 => 再执行新一轮宏任务

任务执行顺序例子：

//第一个宏任务进入主线程
console.log('1');
//丢到宏事件队列中
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
//微事件1
process.nextTick(function() {
    console.log('6');
})
//主线程直接执行
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    //微事件2
    console.log('8')
})
//丢到宏事件队列中
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})
 
// 1,7,6,8,2,4,3,5,9,11,10,12

解析：

第一个宏任务

第一个宏任务进入主线程,打印1
setTimeout丢到宏任务队列
process.nextTick丢到微任务队列
new Promise直接执行，打印7
Promise then事件丢到微任务队列
setTimeout丢到宏任务队列

第一个宏任务执行完，开始执行微任务

执行process.nextTick，打印6
执行Promise then事件，打印8

微任务执行完，清空微任务队列，页面渲染，进入下一个宏任务setTimeout

执行打印2
process.nextTick丢到微任务队列
new Promise直接执行，打印4
Promise then事件丢到微任务队列

第二个宏任务执行完，开始执行微任务

执行process.nextTick，打印3
执行Promise then事件，打印5

微任务执行完，清空微任务队列，页面渲染，进入下一个宏任务setTimeout，重复上述类似流程，打印出9,11,10,12

二、Vue异步批量更新过程

1.解析：当侦测到数据变化，vue会开启一个队列，将相关的watcher存入队列，将回调函数存入callbacks队列，异步执行回调函数，遍历watcher队列进行渲染。

异步：Vue 在更新 DOM 时是异步执行的，只要侦听到数据变化，vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据的变更。

批量：如果同一个watcher被多次触发，只会被推入到队列中一次。去重可以避免不必要的计算和DOM操作。然后在下一个的事件循环“tick”中，vue刷新队列执行实际工作。

异步策略：Vue的内部对异步队列尝试使用原生的Promise.then、MutationObserver和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。即会先尝试使用微任务方式，不行再用宏任务方式。

异步批量更新流程图：

三、vue批量异步更新源码

异步更新：整个过程相当于将臭袜子放到盆子里，最后一起洗。

1.当一个Data更新时，会依次执行以下代码：

（1）触发Data.set()

（2）调用dep.notify()：遍历所有相关的Watcher，调用watcher.update()。

core/oberver/index.js：

notify () {
    const subs = this.subs.slice()
    // 如果未运行异步，则不会在调度程序中对sub进行排序
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // 排序，确保它们按正确的顺序执行
      subs.sort((a, b) => a.id - b.id)
    }
    // 遍历相关watcher，并调用watcher更新
    for (let i = 0, l = subs.length; i < l; i++) { 
      subs[i].update()
    }
}

（3）执行watcher.update(): 判断是立即更新还是异步更新。若为异步更新,调用queueWatcher(this)，将watcher入队，放到后面一起更新。

core/oberver/watcher.js：

update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      //立即执行渲染
      this.run()
    } else {
      // watcher入队操作，后面一起执行渲染
      queueWatcher(this)
    }
}

（4）执行queueWatcher(this): watcher进行去重等操作后，添加到队列中，调用nextTick(flushSchedulerQueue)执行异步队列,传入回调函数flushSchedulerQueue。

core/oberver/scheduler.js：

function queueWatcher (watcher: Watcher) {
  // has 标识，判断该watcher是否已在,避免在一个队列中添加相同的 Watcher
  const id = watcher.id
  if (has[id] == null) {
    has[id] = true
    // flushing 标识，处理 Watcher 渲染时，可能产生的新 Watcher。
    if (!flushing) {
      // 将当前 Watcher 添加到异步队列
      queue.push(watcher)
    } else {
      // 产生新的watcher就添加到排序的位置
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    // waiting 标识，让所有的 Watcher 都在一个 tick 内进行更新。
    if (!waiting) {
      waiting = true
 
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      // 执行异步队列，并传入回调
      nextTick(flushSchedulerQueue)
    }
  }
}

（5）执行nextTick(cb): 将传进去的 flushSchedulerQueue 函数处理后添加到callbacks队列中，调用timerFunc启动异步执行任务。

core/util/next-tick.js：

function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 此处的callbacks就是队列（回调数组），将传入的 flushSchedulerQueue 方法处理后添加到回调数组
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    // 启动异步执行任务，此方法会根据浏览器兼容性，选用不同的异步策略
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

（6）timerFunc()：根据浏览器兼容性，选用不同的异步方式去执行flushCallbacks。由于宏任务耗费的时间是大于微任务的，所以先选用微任务的方式，都不行时再使用宏任务的方式,

core/util/next-tick.js：

let timerFunc
 
// 支持Promise则使用Promise异步的方式执行flushCallbacks
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // 实在不行再使用setTimeout的异步方式
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

（7）flushCallbacks:异步执行callbacks队列中所有函数

core/util/next-tick.js：

// 循环callbacks队列，执行里面所有函数flushSchedulerQueue，并清空队列
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

（8）flushSchedulerQueue()：遍历watcher队列，执行watcher.run()

watcher.run()：真正的渲染

function flushSchedulerQueue() {
  currentFlushTimestamp = getNow();
  flushing = true;
  let watcher, id;
 
  // 排序，先渲染父节点，再渲染子节点
  // 这样可以避免不必要的子节点渲染，如：父节点中 v -if 为 false 的子节点，就不用渲染了
  queue.sort((a, b) => a.id - b.id);
 
  // do not cache length because more watchers might be pushed
  // as we run existing watchers
  // 遍历所有 Watcher 进行批量更新。
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index];
    if (watcher.before) {
      watcher.before();
    }
    id = watcher.id;
    has[id] = null;
    // 真正的更新函数
    watcher.run();
    // in dev build, check and stop circular updates.
    if (process.env.NODE_ENV !== "production" && has[id] != null) {
      circular[id] = (circular[id] || 0) + 1;
      if (circular[id] > MAX_UPDATE_COUNT) {
        warn(
          "You may have an infinite update loop " +
            (watcher.user
              ? `in watcher with expression "${watcher.expression}"`
              : `in a component render function.`),
          watcher.vm
        );
        break;
      }
    }
  }
 
  // keep copies of post queues before resetting state
  const activatedQueue = activatedChildren.slice();
  const updatedQueue = queue.slice();
 
  resetSchedulerState();
 
  // call component updated and activated hooks
  callActivatedHooks(activatedQueue);
  callUpdatedHooks(updatedQueue);
 
  // devtool hook
  /* istanbul ignore if */
  if (devtools && config.devtools) {
    devtools.emit("flush");
  }
}

（9）updateComponent()：watcher.run()经过一系列的转圈，执行updateComponent，updateComponent中执行render()，让组件重新渲染，再执行_update(vnode) ,再执行 patch()更新界面。

（10）_update()：根据是否有vnode分别执行不同的patch。

四、Vue.nextTick(callback)

1.Vue.nextTick(callback)作用：获取更新后的真正的 DOM 元素。

由于Vue 在更新 DOM 时是异步执行的，所以在修改data之后，并不能立刻获取到修改后的DOM元素。为了获取到修改后的 DOM元素，可以在数据变化之后立即使用 Vue.nextTick(callback)。

2.为什么 Vue.$nextTick 能够获取更新后的 DOM？

因为Vue.$nextTick其实就是调用 nextTick 方法，在异步队列中执行回调函数。

Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this);
};

3.使用 Vue.$nextTick

例子1：

<template>
  <p id="test">{{foo}}</p>
</template>
<script>
 
export default{
  data(){
    return {
      foo: 'foo'
    }
  },
  mounted() {
    let test  = document.querySelector('#test');
    this.foo = 'foo1';
    // vue在更新DOM时是异步进行的，所以此处DOM并未更新
    console.log('test.innerHTML:' + test.innerHTML);
 
    this.$nextTick(() => {
      // nextTick回调是在DOM更新后调用的，所以此处DOM已经更新
      console.log('nextTick:test.innerHTML:' + test.innerHTML); 
    })
  }
}
</script>
执行结果：
test.innerHTML:foo
nextTick:test.innerHTML:foo1

例子2：

<template>
  <p id="test">{{foo}}</p>
</template>
<script>
 
export default{
  data(){
    return {
      foo: 'foo'
    }
  },
  mounted() {
    let test  = document.querySelector('#test');
    this.foo = 'foo1';
    // vue在更新DOM时是异步进行的，所以此处DOM并未更新
    console.log('1.test.innerHTML:' + test.innerHTML); 
 
    this.$nextTick(() => {
      // nextTick回调是在DOM更新后调用的，所以此处DOM已经更新
      console.log('nextTick:test.innerHTML:' + test.innerHTML); 
    })
 
    this.foo = 'foo2';
    // 此处DOM并未更新，且先于异步回调函数前执行
    console.log('2.test.innerHTML:' + test.innerHTML); 
  }
}
</script>
执行结果：
1.test.innerHTML:foo
2.test.innerHTML:foo
nextTick:test.innerHTML:foo2

例子3：

<template>
  <p id="test">{{foo}}</p>
</template>
<script>
 
export default{
  data(){
    return {
      foo: 'foo'
    }
  },
  mounted() {
    let test  = document.querySelector('#test');
    this.$nextTick(() => {
      // nextTick回调是在触发更新之前就放入callbacks队列，
      // 压根没有触发watcher.update以及以后的一系列操作，所以也就没有执行到最后的watcher.run()实行渲染
      // 所以此处DOM并未更新
      console.log('nextTick:test.innerHTML:' + test.innerHTML);
    })
    this.foo = 'foo1';
    // vue在更新DOM时是异步进行的，所以此处DOM并未更新
    console.log('1.test.innerHTML:' + test.innerHTML); 
    this.foo = 'foo2';
    // 此处DOM并未更新，且先于异步回调函数前执行
    console.log('2.test.innerHTML:' + test.innerHTML); 
  }
}
</script>
执行结果：
1.test.innerHTML:foo
2.test.innerHTML:foo
nextTick:test.innerHTML:foo

4、 nextTick与其他异步方法

nextTick是模拟的异步任务，所以可以用 Promise 和 setTimeout 来实现和 this.$nextTick 相似的效果。

例子1：

<template>
  <p id="test">{{foo}}</p>
</template>
<script>
 
export default{
  data(){
    return {
      foo: 'foo'
    }
  },
  mounted() {
    let test  = document.querySelector('#test');
    this.$nextTick(() => {
      // nextTick回调是在触发更新之前就放入callbacks队列，
      // 压根没有触发watcher.update以及以后的一系列操作，所以也就没有执行到最后的watcher.run()实行渲染
      // 所以此处DOM并未更新
      console.log('nextTick:test.innerHTML:' + test.innerHTML); 
    })
    this.foo = 'foo1';
    // vue在更新DOM时是异步进行的，所以此处DOM并未更新
    console.log('1.test.innerHTML:' + test.innerHTML); 
    this.foo = 'foo2';
    // 此处DOM并未更新，且先于异步回调函数前执行
    console.log('2.test.innerHTML:' + test.innerHTML); 
 
    Promise.resolve().then(() => {
      console.log('Promise:test.innerHTML:' + test.innerHTML); 
    });
    setTimeout(() => {
        console.log('setTimeout:test.innerHTML:' + test.innerHTML);
    });
  }
}
</script>
执行结果：
1.test.innerHTML:foo
2.test.innerHTML:foo
nextTick:test.innerHTML:foo
Promise:test.innerHTML:foo2
setTimeout:test.innerHTML:foo2

例子2：


<template>
  <p id="test">{{foo}}</p>
</template>
<script>
 
export default{
  data(){
    return {
      foo: 'foo'
    }
  },
  mounted() {
    let test  = document.querySelector('#test');
    // Promise 和 setTimeout 依旧是等到DOM更新后再执行
    Promise.resolve().then(() => {
      console.log('Promise:test.innerHTML:' + test.innerHTML); 
    });
    setTimeout(() => {
        console.log('setTimeout:test.innerHTML:' + test.innerHTML);
    });
    this.$nextTick(() => {
      // nextTick回调是在触发更新之前就放入callbacks队列，
      // 压根没有触发watcher.update以及以后的一系列操作，所以也就没有执行到最后的watcher.run()实行渲染
      // 所以此处DOM并未更新
      console.log('nextTick:test.innerHTML:' + test.innerHTML); 
    })
    this.foo = 'foo1';
    // vue在更新DOM时是异步进行的，所以此处DOM并未更新
    console.log('1.test.innerHTML:' + test.innerHTML); 
    this.foo = 'foo2';
    // 此处DOM并未更新，且先于异步回调函数前执行
    console.log('2.test.innerHTML:' + test.innerHTML); 
  }
}
</script>
执行结果：
1.test.innerHTML:foo
2.test.innerHTML:foo
nextTick:test.innerHTML:foo
Promise:test.innerHTML:foo2
setTimeout:test.innerHTML:foo2

总结

到此这篇关于vue源码之批量异步更新策略的文章就介绍到这了,更多相关vue批量异步更新策略内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue项目如何部署运行到tomcat上
这篇文章主要介绍了vue项目如何部署运行到tomcat上的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
element中el-table表头通过header-row-style设置样式
有些时候需要给element-ui表头设置不同样式,本文主要介绍了element中el-table表头通过header-row-style设置样式,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
vue+echarts实现进度条式柱状图
这篇文章主要为大家详细介绍了vue+echarts实现进度条式柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
简单了解Vue computed属性及watch区别
这篇文章主要介绍了通过实例解析Vue computed属性及watch区别,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
Vue实现页面添加水印功能
今天小编就为大家分享一篇Vue实现页面添加水印功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue配置请求本地json数据的方法
这篇文章主要介绍了vue配置请求本地json数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue props传值失败输出undefined的解决方法
今天小编就为大家分享一篇vue props传值失败输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue实现文本编译详情
这篇文章主要介绍了Vue实现文本编译详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助
2022-08-08
vue-admin-template框架搭建及应用小结
vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发，这篇文章主要介绍了vue-admin-template框架搭建及应用,需要的朋友可以参考下
2023-05-05
关于axios不能使用Vue.use()浅析
这篇文章主要给大家介绍了关于axios不能使用Vue.use()的相关资料，文中通过示例代码介绍的非常详细，对大家的理解和学习具有一定的参考学习价值，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2018-01-01