vue diff出dom变更之后是像react一样加入一个事件循环中批量渲染还是单独渲染啊？

Question

这是网上看到的一篇内容，说是即使渲染， 但是已经是即使渲染了， 为什么还会有$nextTick（）呢？

以下是$nextTick（）的官方解释

Answer 1

上面说的都没错，Vue的patch是即时的，会将patch的结果，直接赋值给vm.$el，但在这之前，会合并watcher队列：

  Watcher.prototype.update = function update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true;
    } else if (this.sync) {
      this.run();
    } else {
      queueWatcher(this);
    }
  };

具体可以看queueWatcher 和 flushSchedulerQueue，所以在更新数据时watcher.run()方法是异步执行的。这也如上所说：

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个
watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

当然你也可以修改Vue源码，把DOM的更新改成同步试试：

new Watcher(vm, updateComponent, noop, {
      before: function before () {
        if (vm._isMounted && !vm._isDestroyed) {
          callHook(vm, 'beforeUpdate');
        }
      },
      sync: true // DOM改成同步更新
    }, true /* isRenderWatcher */);

那么如果你在代码遍历循环改变了1000次数据，有可能页面会卡死。。。