Vue如何批量更新dom

这篇文章将为大家详细讲解有关Vue如何批量更新dom，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

场景介绍

在一个SFC（single file component，单文件组件）中，我们经常会写这样的逻辑：

<template>  <div>    <span>{{ a }}</span>    <span>{{ b }}</span>  </div>  </template><script type="javascript">export default {  data() {    return {      a: 0,      b: 0    }  },  created() {    // some logic code    this.a = 1    this.b = 2  }}</script>

你可能知道，在完成this.a和this.b的赋值操作后，Vue会将this.a和this.b相应的dom更新函数放到一个微任务中。等待主线程的同步任务执行完毕后，该微任务会出队并执行。我们看看Vue的官方文档"深入响应式原理-声明响应式property"一节中，是怎么进行描述的：

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

那么，Vue是怎么实现这一能力的呢？为了回答这个问题，我们需要深入Vue源码的核心部分——响应式原理。

深入响应式

我们首先看一看在我们对this.a和this.b进行赋值操作以后，发生了什么。如果使用Vue CLI进行开发，在main.js文件中，会有一个new Vue()的实例化操作。由于Vue的源码是使用flow写的，无形中增加了理解成本。为了方便，我们直接看npm vue包中dist文件夹中的vue.js源码。搜索‘function Vue'，找到了以下源码：

function Vue (options) {  if (!(this instanceof Vue)  ) {    warn('Vue is a constructor and should be called with the `new` keyWord');  }  this._init(options);}

非常简单的源码，源码真的没有我们想象中那么难！带着这样的意外惊喜，我们继续找到_init函数，看看这个函数做了什么：

Vue.prototype._init = function (options) {  var vm = this;  // a uid  vm._uid = uid$3++;  var startTag, endTag;    if (config.perfORMance && mark) {    startTag = "vue-perf-start:" + (vm._uid);    endTag = "vue-perf-end:" + (vm._uid);    mark(startTag);  }  // a flag to avoid this being observed  vm._isVue = true;  // merge options  if (options && options._isComponent) {    // optimize internal component instantiation    // since dynamic options merging is pretty slow, and none of the    // internal component options needs special treatment.    initInternalComponent(vm, options);  } else {    vm.$options = mergeOptions(      resolveConstructorOptions(vm.constructor),      options || {},      vm    );  }    {    initProxy(vm);  }  // expose real self  vm._self = vm;  initLifecycle(vm);  initEvents(vm);  initRender(vm);  callHook(vm, 'beforeCreate');  initInjections(vm); // resolve injections before data/props  initState(vm);  initProvide(vm); // resolve provide after data/props  callHook(vm, 'created');    if (config.performance && mark) {    vm._name = formatComponentName(vm, false);    mark(endTag);    measure(("vue " + (vm._name) + " init"), startTag, endTag);  }  if (vm.$options.el) {    vm.$mount(vm.$options.el);  }}

我们先不管上面的一堆判断，直接拉到下面的主逻辑。可以看到，_init函数先后执行了initLifeCycle、initEvents、initRender、callHook、initInjections、initState、initProvide以及第二次callHook函数。从函数的命名来看，我们可以知道具体的意思。大体来说，这段代码分为以下两个部分

1. 在完成初始化生命周期、事件钩子以及渲染函数后，进入beforeCreate生命周期（执行beforeCreate函数）

2. 在完成初始化注入值、状态以及提供值之后，进入created生命周期（执行created函数）

其中，我们关心的数据响应式原理部分在initState函数中，我们看看这个函数做了什么：

function initState (vm) {  vm._watchers = [];  var opts = vm.$options;  if (opts.props) { initProps(vm, opts.props); }  if (opts.methods) { initMethods(vm, opts.methods); }  if (opts.data) {    initData(vm);  } else {    observe(vm._data = {}, true );  }  if (opts.computed) { initComputed(vm, opts.computed); }  if (opts.watch && opts.watch !== nativeWatch) {    initWatch(vm, opts.watch);  }}

这里我们看到了在书写SFC文件时常常见到的几个配置项：props、methods、data、computed和watch。我们将注意力集中到opts.data部分，这一部分执行了initData函数：

function initData (vm) {  var data = vm.$options.data;  data = vm._data = typeof data === 'function'    ? getData(data, vm)    : data || {};  if (!isPlainObject(data)) {    data = {};    warn(      'data functions should return an object:\n' +      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',      vm    );  }  // proxy data on instance  var keys = Object.keys(data);  var props = vm.$options.props;  var methods = vm.$options.methods;  var i = keys.length;  while (i--) {    var key = keys[i];    {      if (methods && hasOwn(methods, key)) {        warn(          ("Method \"" + key + "\" has already been defined as a data property."),          vm        );      }    }    if (props && hasOwn(props, key)) {      warn(        "The data property \"" + key + "\" is already declared as a prop. " +        "Use prop default value instead.",        vm      );    } else if (!isReserved(key)) {      proxy(vm, "_data", key);    }  }  // observe data  observe(data, true );}

我们在写data配置项时，会将其定义为函数，因此这里执行了getData函数：

function getData (data, vm) {  // #7573 disable dep collection when invoking data getters  pushTarget();  try {    return data.call(vm, vm)  } catch (e) {    handleError(e, vm, "data()");    return {}  } finally {    popTarget();  }}

getData函数做的事情非常简单，就是在组件实例上下文中执行data函数。注意，在执行data函数前后，分别执行了pushTarget函数和popTarget函数，这两个函数我们后面再讲。

执行getData函数后，我们回到initData函数，后面有一个循环的错误判断，暂时不用管。于是我们来到了observe函数：

function observe (value, asRootData) {  if (!isObject(value) || value instanceof Vnode) {    return  }  var ob;  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {    ob = value.__ob__;  } else if (    shouldObserve &&    !isServerRendering() &&    (Array.isArray(value) || isPlainObject(value)) &&    Object.isExtensible(value) &&    !value._isVue  ) {    ob = new Observer(value);  }  if (asRootData && ob) {    ob.vmCount++;  }  return ob}

observe函数为data对象创建了一个观察者（ob），也就是实例化Observer，实例化Observer具体做了什么呢？我们继续看源码：

var Observer = function Observer (value) {  this.value = value;  this.dep = new Dep();  this.vmCount = 0;  def(value, '__ob__', this);  if (Array.isArray(value)) {    if (hasProto) {      protoAugment(value, arrayMethods);    } else {      copyAugment(value, arrayMethods, arrayKeys);    }    this.observeArray(value);  } else {    this.walk(value);  }}

正常情况下，因为我们定义的data函数返回的都是一个对象，所以这里我们先不管对数组的处理。那么就是继续执行walk函数：

Observer.prototype.walk = function walk (obj) {  var keys = Object.keys(obj);  for (var i = 0; i < keys.length; i++) {    defineReactive$$1(obj, keys[i]);  }}

对于data函数返回的对象，即组件实例的data对象中的每个可枚举属性，执行defineReactive$$1函数：

function defineReactive$$1 (  obj,  key,  val,  customSetter,  shallow) {  var dep = new Dep();  var property = Object.getOwnPropertyDescriptor(obj, key);  if (property && property.configurable === false) {    return  }  // cater for pre-defined getter/setters  var getter = property && property.get;  var setter = property && property.set;  if ((!getter || setter) && arguments.length === 2) {    val = obj[key];  }  var childOb = !shallow && observe(val);  Object.defineProperty(obj, key, {    enumerable: true,    configurable: true,    get: function reactiveGetter () {      var value = getter ? getter.call(obj) : val;      if (Dep.target) {        dep.depend();        if (childOb) {          childOb.dep.depend();          if (Array.isArray(value)) {            dependArray(value);          }        }      }      return value    },    set: function reactiveSetter (newVal) {      var value = getter ? getter.call(obj) : val;            if (newVal === value || (newVal !== newVal && value !== value)) {        return      }            if (customSetter) {        customSetter();      }      // #7981: for accessor properties without setter      if (getter && !setter) { return }      if (setter) {        setter.call(obj, newVal);      } else {        val = newVal;      }      childOb = !shallow && observe(newVal);      dep.notify();    }  });}

在defineReactive$$1函数中，首先实例化一个依赖收集器。然后使用Object.defineProperty重新定义对象属性的getter（即上面的get函数）和setter（即上面的set函数）。

触发getter

getter和setter某种意义上可以理解为回调函数，当读取对象某个属性的值时，会触发get函数（即getter）；当设置对象某个属性的值时，会触发set函数（即setter）。我们回到最开始的例子：

<template>  <div>    <span>{{ a }}</span>    <span>{{ b }}</span>  </div>  </template><script type="javascript">export default {  data() {    return {      a: 0,      b: 0    }  },  created() {    // some logic code    this.a = 1    this.b = 2  }}</script>

这里有设置this对象的属性a和属性b的值，因此会触发setter。我们把上面set函数代码单独拿出来：

function reactiveSetter (newVal) {  var value = getter ? getter.call(obj) : val;    if (newVal === value || (newVal !== newVal && value !== value)) {    return  }    if (customSetter) {    customSetter();  }  // #7981: for accessor properties without setter  if (getter && !setter) { return }  if (setter) {    setter.call(obj, newVal);  } else {    val = newVal;  }  childOb = !shallow && observe(newVal);  dep.notify();}

setter先执行了getter：

function reactiveGetter () {  var value = getter ? getter.call(obj) : val;  if (Dep.target) {    dep.depend();    if (childOb) {      childOb.dep.depend();      if (Array.isArray(value)) {        dependArray(value);      }    }  }  return value}

getter先检测Dep.target是否存在。在前面执行getData函数的时候，Dep.target的初始值为null，它在什么时候被赋值了呢？我们前面讲getData函数的时候，有看到一个pushTarget函数和popTarget函数，这两个函数的源码如下：

Dep.target = null;var targetStack = [];function pushTarget (target) {  targetStack.push(target);  Dep.target = target;}function popTarget () {  targetStack.pop();  Dep.target = targetStack[targetStack.length - 1];}

想要正常执行getter，就需要先执行pushTarget函数。我们找找pushTarget函数在哪里执行的。在vue.js中搜索pushTarget，我们找到了5个地方，除去定义的地方，执行的地方有4个。
第一个执行pushTarget函数的地方。这是一个处理错误的函数，正常逻辑不会触发：

function handleError (err, vm, info) {  // Deactivate deps tracking while processing error handler to avoid possible infinite rendering.  // See: Https://GitHub.com/vuejs/vuex/issues/1505  pushTarget();  try {    if (vm) {      var cur = vm;      while ((cur = cur.$parent)) {        var hooks = cur.$options.errorCaptured;        if (hooks) {          for (var i = 0; i < hooks.length; i++) {            try {              var capture = hooks[i].call(cur, err, vm, info) === false;              if (capture) { return }            } catch (e) {              globalHandleError(e, cur, 'errorCaptured hook');            }          }        }      }    }    globalHandleError(err, vm, info);  } finally {    popTarget();  }}

第二个执行pushTarget的地方。这是调用对应的钩子函数。在执行到对应的钩子函数时会触发。不过，我们现在的操作介于beforeCreate钩子和created钩子之间，还没有触发：

function callHook (vm, hook) {  // #7573 disable dep collection when invoking lifecycle hooks  pushTarget();  var handlers = vm.$options[hook];  var info = hook + " hook";  if (handlers) {    for (var i = 0, j = handlers.length; i < j; i++) {      invokeWithErrorHandling(handlers[i], vm, null, vm, info);    }  }  if (vm._hasHookEvent) {    vm.$emit('hook:' + hook);  }  popTarget();}

第三个执行pushTarget的地方。这是实例化watcher时执行的函数。检查前面的代码，我们似乎也没有看到new Watcher的操作：

Watcher.prototype.get = function get () {  pushTarget(this);  var value;  var vm = this.vm;  try {    value = this.getter.call(vm, vm);  } catch (e) {    if (this.user) {      handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));    } else {      throw e    }  } finally {    // "touch" every property so they are all tracked as    // dependencies for deep watching    if (this.deep) {      traverse(value);    }    popTarget();    this.cleanupDeps();  }  return value}

第四个执行pushTarget的地方，这就是前面的getData函数。但是getData函数的执行位于defineReactive$$1函数之前。在执行完getData函数以后，Dep.target已经被重置为null了。

function getData (data, vm) {  // #7573 disable dep collection when invoking data getters  pushTarget();  try {    return data.call(vm, vm)  } catch (e) {    handleError(e, vm, "data()");    return {}  } finally {    popTarget();  }}

看起来，直接触发setter并不能让getter中的逻辑正常执行。并且，我们还发现，由于setter中也有Dep.target的判断，所以如果我们找不到Dep.target的来源，setter的逻辑也无法继续往下走。

寻找Dep.target

那么，到底Dep.target的值是从哪里来的呢？不用着急，我们回到_init函数的操作继续往下看：

Vue.prototype._init = function (options) {  var vm = this;  // a uid  vm._uid = uid$3++;  var startTag, endTag;    if (config.performance && mark) {    startTag = "vue-perf-start:" + (vm._uid);    endTag = "vue-perf-end:" + (vm._uid);    mark(startTag);  }  // a flag to avoid this being observed  vm._isVue = true;  // merge options  if (options && options._isComponent) {    // optimize internal component instantiation    // since dynamic options merging is pretty slow, and none of the    // internal component options needs special treatment.    initInternalComponent(vm, options);  } else {    vm.$options = mergeOptions(      resolveConstructorOptions(vm.constructor),      options || {},      vm    );  }    {    initProxy(vm);  }  // expose real self  vm._self = vm;  initLifecycle(vm);  initEvents(vm);  initRender(vm);  callHook(vm, 'beforeCreate');  initInjections(vm); // resolve injections before data/props  initState(vm);  initProvide(vm); // resolve provide after data/props  callHook(vm, 'created');    if (config.performance && mark) {    vm._name = formatComponentName(vm, false);    mark(endTag);    measure(("vue " + (vm._name) + " init"), startTag, endTag);  }  if (vm.$options.el) {    vm.$mount(vm.$options.el);  }}

我们发现，在_init函数的最后，执行了vm.$mount函数，这个函数做了什么呢？

Vue.prototype.$mount = function (  el,  hydrating) {  el = el && inBrowser ? query(el) : undefined;  return mountComponent(this, el, hydrating)}

我们继续进入mountComponent函数看看：

function mountComponent (  vm,  el,  hydrating) {  vm.$el = el;  if (!vm.$options.render) {    vm.$options.render = createEmptyVNode;    {            if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||        vm.$options.el || el) {        warn(          'You are using the runtime-only build of Vue where the template ' +          'compiler is not available. Either pre-compile the templates into ' +          'render functions, or use the compiler-included build.',          vm        );      } else {        warn(          'Failed to mount component: template or render function not defined.',          vm        );      }    }  }  callHook(vm, 'beforeMount');  var updateComponent;    if (config.performance && mark) {    updateComponent = function () {      var name = vm._name;      var id = vm._uid;      var startTag = "vue-perf-start:" + id;      var endTag = "vue-perf-end:" + id;      mark(startTag);      var vnode = vm._render();      mark(endTag);      measure(("vue " + name + " render"), startTag, endTag);      mark(startTag);      vm._update(vnode, hydrating);      mark(endTag);      measure(("vue " + name + " patch"), startTag, endTag);    };  } else {    updateComponent = function () {      vm._update(vm._render(), hydrating);    };  }  // we set this to vm._watcher inside the watcher's constructor  // since the watcher's initial patch may call $forceUpdate (e.g. inside child  // component's mounted hook), which relies on vm._watcher being already defined  new Watcher(vm, updateComponent, noop, {    before: function before () {      if (vm._isMounted && !vm._isDestroyed) {        callHook(vm, 'beforeUpdate');      }    }  }, true );  hydrating = false;  // manually mounted instance, call mounted on self  // mounted is called for render-created child components in its inserted hook  if (vm.$vnode == null) {    vm._isMounted = true;    callHook(vm, 'mounted');  }  return vm}

我们惊喜地发现，这里有一个new Watcher的操作！真是山重水复疑无路，柳暗花明又一村！这里实例化的watcher是一个用来更新dom的watcher。他会依次读取SFC文件中的template部分中的所有值。这也就意味着会触发对应的getter。
由于new Watcher会执行watcher.get函数，该函数执行pushTarget函数，于是Dep.target被赋值。getter内部的逻辑顺利执行。

getter

至此，我们终于到了Vue的响应式原理的核心。我们再次回到getter，看一看有了Dep.target以后，getter做了什么：

function reactiveGetter () {  var value = getter ? getter.call(obj) : val;  if (Dep.target) {    dep.depend();    if (childOb) {      childOb.dep.depend();      if (Array.isArray(value)) {        dependArray(value);      }    }  }  return value}

同样地，我们先不关注提高代码健壮性的细节处理，直接看主线。可以看到，当Dep.target存在时，执行了dep.depend函数。这个函数做了什么呢？我们看看代码：

Dep.prototype.depend = function depend () {  if (Dep.target) {    Dep.target.aDDDep(this);  }}

做的事情也非常简单。就是执行了Dep.target.addDep函数。但是Dep.target其实是一个watcher，所以我们要回到Watcher的代码：

Watcher.prototype.addDep = function addDep (dep) {  var id = dep.id;  if (!this.newDepIds.has(id)) {    this.newDepIds.add(id);    this.newDeps.push(dep);    if (!this.depIds.has(id)) {      dep.addSub(this);    }  }}

同样地，我们先忽略一些次要的逻辑处理，把注意力集中到dep.addSub函数上：

Dep.prototype.addSub = function addSub (sub) {  this.subs.push(sub);}

也是非常简单的逻辑，把watcher作为一个订阅者推入数组中缓存。至此，getter的整个逻辑走完。此后执行popTarget函数，Dep.target被重置为null

setter

我们再次回到业务代码：

<template>  <div>    <span>{{ a }}</span>    <span>{{ b }}</span>  </div>  </template><script type="javascript">export default { data() {    return {      a: 0,      b: 0    }  },  created() {    // some logic code    this.a = 1    this.b = 2  }}</script>

在created生命周期中，我们触发了两次setter，setter执行的逻辑如下：

function reactiveSetter (newVal) {  var value = getter ? getter.call(obj) : val;    if (newVal === value || (newVal !== newVal && value !== value)) {    return  }    if (customSetter) {    customSetter();  }  // #7981: for accessor properties without setter  if (getter && !setter) { return }  if (setter) {    setter.call(obj, newVal);  } else {    val = newVal;  }  childOb = !shallow && observe(newVal);  dep.notify();}

这里，我们只需要关注setter最后执行的函数：dep.notify()。我们看看这个函数做了什么：

Dep.prototype.notify = function notify () {  // stabilize the subscriber list first  var subs = this.subs.slice();  if (!config.async) {    // subs aren't sorted in scheduler if not running async    // we need to sort them now to make sure they fire in correct    // order    subs.sort(function (a, b) { return a.id - b.id; });  }  for (var i = 0, l = subs.length; i < l; i++) {    subs[i].update();  }}

This.subs的每一项元素均为一个watcher。在上面getter章节中，我们只收集到了一个watcher。因为触发了两次setter，所以subs[0].update()，即watcher.update()函数会执行两次。我们看看这个函数做了什么：

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

按照惯例，我们直接跳入queueWatcher函数：

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 > index && queue[i].id > watcher.id) {        i--;      }      queue.splice(i + 1, 0, watcher);    }    // queue the flush    if (!waiting) {      waiting = true;      if (!config.async) {        flushSchedulerQueue();        return      }      nextTick(flushSchedulerQueue);    }  }}

由于id相同，所以watcher的回调函数只会被推入到queue一次。这里我们再次看到了一个熟悉的面孔：nextTick。

function nextTick (cb, ctx) {  var _resolve;  callbacks.push(function () {    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(function (resolve) {      _resolve = resolve;    })  }}

nextTick函数将回调函数再次包裹一层后，执行timerFunc()

var timerFunc;// The nextTick behavior leverages the microtask queue, which can be accessed// via either native Promise.then or MutationObserver.// MutationObserver has wider support, however it is seriously bugged in// UIWEBView in iOS >= 9.3.3 when triggered in touch event handlers. It// completely stops working after triggering a few times... so, if native// Promise is available, we will use it:if (typeof Promise !== 'undefined' && isNative(Promise)) {  var p = Promise.resolve();  timerFunc = function () {    p.then(flushCallbacks);    // In problematic UIWebViews, Promise.then doesn't completely break, but    // it can get stuck in a weird state where callbacks are pushed into the    // microtask queue but the queue isn't being flushed, until the browser    // needs to do some other work, e.g. handle a timer. Therefore we can    // "force" the microtask queue to be flushed by adding an empty timer.    if (isIOS) { setTimeout(noop); }  };  isUsingMicroTask = true;} else if (!isIE && 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, iOS7, Android 4.4  // (#6466 MutationObserver is unreliable in IE11)  var counter = 1;  var observer = new MutationObserver(flushCallbacks);  var textNode = document.createTextNode(String(counter));  observer.observe(textNode, {    characterData: true  });  timerFunc = function () {    counter = (counter + 1) % 2;    textNode.data = String(counter);  };  isUsingMicroTask = true;} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {  // Fallback to setImmediate.  // Technically it leverages the (Macro) task queue,  // but it is still a better choice than setTimeout.  timerFunc = function () {    setImmediate(flushCallbacks);  };} else {  // Fallback to setTimeout.  timerFunc = function () {    setTimeout(flushCallbacks, 0);  };}

timerFunc函数是微任务的平稳降级。他将根据所在环境的支持程度，依次调用Promise、MutationObserver、setImmediate和setTimeout。并在对应的微任务或者模拟微任务队列中执行回调函数。

function flushSchedulerQueue () {  currentFlushTimestamp = getNow();  flushing = true;  var watcher, id;  // Sort queue before flush.  // This ensures that:  // 1. Components are updated from parent to child. (because parent is always  //    created before the child)  // 2. A component's user watchers are run before its render watcher (because  //    user watchers are created before the render watcher)  // 3. If a component is destroyed during a parent component's watcher run,  //    its watchers can be skipped.  queue.sort(function (a, b) { return a.id - b.id; });  // do not cache length because more watchers might be pushed  // as we run existing watchers  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 (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  var activatedQueue = activatedChildren.slice();  var updatedQueue = queue.slice();  resetSchedulerState();  // call component updated and activated hooks  callActivatedHooks(activatedQueue);  callUpdatedHooks(updatedQueue);  // devtool hook    if (devtools && config.devtools) {    devtools.emit('flush');  }}

回调函数的核心逻辑是执行watcher.run函数：

Watcher.prototype.run = function run () {  if (this.active) {    var value = this.get();    if (      value !== this.value ||      // Deep watchers and watchers on Object/Arrays should fire even      // when the value is the same, because the value may      // have mutated.      isObject(value) ||      this.deep    ) {      // set new value      var oldValue = this.value;      this.value = value;      if (this.user) {        try {          this.cb.call(this.vm, value, oldValue);        } catch (e) {          handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));        }      } else {        this.cb.call(this.vm, value, oldValue);      }    }  }}

执行this.cb函数，即watcher的回调函数。至此，所有的逻辑走完。

总结

我们再次回到业务场景：

<template>  <div>    <span>{{ a }}</span>    <span>{{ b }}</span>  </div>  </template><script type="javascript">export default {  data() {    return {      a: 0,      b: 0    }  },  created() {    // some logic code    this.a = 1    this.b = 2  }}</script>

虽然我们触发了两次setter，但是对应的渲染函数在微任务中却只执行了一次。也就是说，在dep.notify函数发出通知以后，Vue将对应的watcher进行了去重、排队操作并最终执行回调。

可以看出，两次赋值操作实际上触发的是同一个渲染函数，这个渲染函数更新了多个dom。这就是所谓的批量更新dom。

关于“Vue如何批量更新dom”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。