[JavaScript知识库]史上最全的vue.js源码解析（四）

虽然vue3已经出来很久了，但我觉得vue.js的源码还是非常值得去学习一下。vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到。所以我近期会对vue.js的源码进行解读，分享值得去学习的代码片段，这篇文章将会持续更新。

一、4000~6200代码有哪些内容？：

1.initState：初始化实例状态（initProps，initData，initComputed，initMethods，initWatch，initMixin等）
2.initAssetRegisters：创建组件、指令、过滤器
3.initGlobalAPI:初始化全局api
4.renderClass,mergeClassData,stringifyClass:对 class 的转码、合并和其他二次封装的工具函数
5.ref的注册和实现原理（ref是给元素或者子组件注册引用信息的）

二.4000~6200行代码的重点：

1.Watcher(重点)
在 Watcher 的原型链上定义了get、addDep、cleanupDeps、update、run、evaluate、depend、teardown 方法，进行新增依赖、清除、更新视图等操作。
每个Vue组件都有一个对应的watcher，这个watcher将会在组件render的时候收集组件所依赖的数据，并在依赖有更新的时候，触发组件重新渲染
2.proxy代理
通过 vm 对象（即this）来代理 data 对象中所有属性的操作，更方便的操作 data 中的数据
通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符，所有添加的属性都包含 getter/setter，getter/setter 内部去操作 data 中对应的属性数据
3、keep-alive的 缓存原理
keep-alive是 vue 内置组件，在源码定义中，也具有自己的组件选项如 data 、 method 、 computed 、 props 等，具有抽象组件标识 abstract，通常会与动态组件一同使用，包裹动态组件时，会缓存不活动的组件实例，将它们停用，而不是销毁它们；缓存的组件会触发 activated 或 deactivated 生命周期钩子；会缓存组件实例的 vnode 对象 ，和真实 dom 节点，所以会有 max 属性设置；不会在函数式组件中正常工作，因为它们没有缓存实例
4、VNode的diff与更新
销毁一个DOM节点并创建一个新的再插入是消耗非常大的，无论是DOM对象本身的复杂性还是操作引起的重绘重排，所以虚拟DOM的目标是尽可能复用现有DOM进行更新

三、4000~6200行的代码解读：

  var activeInstance = null;
  var isUpdatingChildComponent = false;
  //设置当前的Vue实例 其返还结果为恢复上一个Vue实例,类似栈的思想来进行树状结构的构建
  function setActiveInstance(vm) {
    var prevActiveInstance = activeInstance;
    activeInstance = vm;
    return function () {
      activeInstance = prevActiveInstance;
    }
  }
  //方法主要用来初始化生命周期相关的属性，以及为parent,child属性赋值
  function initLifecycle (vm) {
    // 定义 options，它是 vm.$options 的引用，后面的代码使用的都是 options 常量
    var options = vm.$options;
    // 查找第一个非抽象父级
    // 定义 parent，它引用当前实例的父实例
    var parent = options.parent;
    // 如果当前实例有父组件，且当前实例不是抽象的
    if (parent && !options.abstract) {
      //循环查找第一个非抽象的父组件
      while (parent.$options.abstract && parent.$parent) {
        parent = parent.$parent;
      }
      // 经过上面的 while 循环后，parent 应该是一个非抽象的组件，将它作为当前实例的父级，
      // 所以将当前实例 vm 添加到父级的 $children 属性里
      parent.$children.push(vm);
    }
    // 设置当前实例的 $parent 属性，指向父级
    vm.$parent = parent;
    // 设置 $root 属性，有父级就是用父级的 $root，否则 $root 指向自身
    vm.$root = parent ? parent.$root : vm;
    // 设置当前实例的 $children 属性为空数组
    vm.$children = [];
    // 设置当前实例的 $ref 属性为空对象
    vm.$refs = {};
    // 设置当前实例的 _watcher 属性为null
    vm._watcher = null;
    vm._inactive = null;
    vm._directInactive = false;
    vm._isMounted = false;
    vm._isDestroyed = false;
    vm._isBeingDestroyed = false;
  }
   //混入生命周期相关属性和方法
  function lifecycleMixin (Vue) {
    Vue.prototype._update = function (vnode, hydrating) {
      // 存储数据做以后update用
      var vm = this;
      var prevEl = vm.$el;
      var prevVnode = vm._vnode;
      var restoreActiveInstance = setActiveInstance(vm);
      vm._vnode = vnode;
      //第一次渲染会调用vm.__patch__方法
      if (!prevVnode) {
        // 初始渲染
        vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */);
      } else {
        // 更新
        vm.$el = vm.__patch__(prevVnode, vnode);
      }
      restoreActiveInstance();
      // 更新参考
      if (prevEl) {
        prevEl.__vue__ = null;
      }
      if (vm.$el) {
        vm.$el.__vue__ = vm;
      }
      // 如果parent是HOC，则也更新其$el
      if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
        vm.$parent.$el = vm.$el;
      }
      // 调度程序调用更新的挂钩，以确保在父级的更新挂钩中更新子级
    };
    // 强制刷新的作用
    //迫使Vue实例重新渲染，注意它仅仅影响实例本身喝插入插槽内容的子组件，而不是所有的子组件
    Vue.prototype.$forceUpdate = function () {
      var vm = this;
      if (vm._watcher) {
        vm._watcher.update();
      }
    };
    // $destroy是组件内部销毁自己。
    // 清理它与其它实例的连接，解绑它的全部指令及事件监听器,
    // 断掉虚拟dom和真实dom之间的联系，并没有真正地回收这个vue实例
    Vue.prototype.$destroy = function () {
      var vm = this;
      if (vm._isBeingDestroyed) {
        return
      }
      //回调触发beforeDestroy钩子函数
      callHook(vm, 'beforeDestroy');
      vm._isBeingDestroyed = true;
      //从父对象中删除vm
      var parent = vm.$parent;
      if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
        remove(parent.$children, vm);
      }
      //拆卸观察者，调用teardown方法移出watcher
      if (vm._watcher) {
        vm._watcher.teardown();
      }
      var i = vm._watchers.length;
      while (i--) {
        vm._watchers[i].teardown();
      }
      // 从数据中删除引用对象
      // 可能没有观察者
      if (vm._data.__ob__) {
        vm._data.__ob__.vmCount--;
      }
      // call the last hook...
      vm._isDestroyed = true;
      //在当前渲染树上调用销毁挂钩
      vm.__patch__(vm._vnode, null);
      //回调触发destroyed钩子函数
      callHook(vm, 'destroyed');
      //关闭所有实例的侦听器
      vm.$off();
      if (vm.$el) {
        vm.$el.__vue__ = null;
      }
      if (vm.$vnode) {
        vm.$vnode.parent = null;
      }
    };
  }
  // $mount函数会调用mountComponent方法
  function mountComponent (
    vm,
    el,//当前挂载的元素
    hydrating //和服务端渲染相关
  ) {
    vm.$el = el;
     // 如果没有!vm.$options.render方法，就创建一个空的VNODE，
    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
          );
        }
      }
    }
    //回调触发beforeMount钩子函数
    callHook(vm, 'beforeMount');

    var updateComponent;
    /* istanbul ignore if */
    // 如果config中配置了performance（记录性能）
    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方法是在执行了Performance的measure方法后，把开始结束两个mark值删除
        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);
      };
    }

    //将其设置为vm._watcher在watcher的构造函数中
    //因为观察者的初始补丁可能会调用$forceUpdate（例如，在child内部组件的挂载钩子），它依赖于已定义的vm.\u监视程序
    new Watcher(vm, updateComponent, noop, {
      // vm._isMounted 为 true,表示这个实例已经挂载了，执行 beforeUpdate 钩子函数
      before: function before () {
        if (vm._isMounted && !vm._isDestroyed) {
          callHook(vm, 'beforeUpdate');
        }
      }
    }, true);
    hydrating = false;

    //手动装入实例，调用自行装入
    //在插入的钩子中为渲染创建的子组件调用mounted
    if (vm.$vnode == null) {
      vm._isMounted = true;
      callHook(vm, 'mounted');
    }
    return vm
  }
    //对占位符 vm.$vnode 的更新、slot的更新，listeners 的更新，props 的更新等
  function updateChildComponent (
    vm,
    propsData,
    listeners,
    parentVnode,
    renderChildren
  ) {
    {
      isUpdatingChildComponent = true;
    }

    // 确定组件是否具有插槽子级
    var newScopedSlots = parentVnode.data.scopedSlots;
    var oldScopedSlots = vm.$scopedSlots;
    var hasDynamicScopedSlot = !!(
      (newScopedSlots && !newScopedSlots.$stable) ||
      (oldScopedSlots !== emptyObject && !oldScopedSlots.$stable) ||
      (newScopedSlots && vm.$scopedSlots.$key !== newScopedSlots.$key) ||
      (!newScopedSlots && vm.$scopedSlots.$key)
    );

    // 来自父级的任何静态插槽子级在父级的更新。动态作用域插槽也可能已更改。
    // 在这种情况下，需要强制更新以确保正确性
    var needsForceUpdate = !!(
      renderChildren ||               // 有一个新的静态插槽
      vm.$options._renderChildren ||  // 有一个旧的静态插槽
      hasDynamicScopedSlot
    );

    vm.$options._parentVnode = parentVnode;
    // 更新vm的占位符节点而不重新渲染
    vm.$vnode = parentVnode;
    // 更新子节点的父节点
    if (vm._vnode) { 
      vm._vnode.parent = parentVnode;
    }
    vm.$options._renderChildren = renderChildren;

    // 更新$attrs和$listeners散列它们也是被动的，因此如果子对象在渲染期间使用它们，
    // 它们可能会触发子对象更新
    vm.$attrs = parentVnode.data.attrs || emptyObject;
    vm.$listeners = listeners || emptyObject;

    // 更新props
    if (propsData && vm.$options.props) {
      //禁止掉根组件 props的依赖收集
      toggleObserving(false);
      var props = vm._props;
      var propKeys = vm.$options._propKeys || [];
      for (var i = 0; i < propKeys.length; i++) {
        var key = propKeys[i];
        var propOptions = vm.$options.props;
        //校验props
        props[key] = validateProp(key, propOptions, propsData, vm);
      }
      toggleObserving(true);
      // 保留一份原始的propsData
      vm.$options.propsData = propsData;
    }

    // 更新listeners
    listeners = listeners || emptyObject;
    var oldListeners = vm.$options._parentListeners;
    vm.$options._parentListeners = listeners;
    updateComponentListeners(vm, listeners, oldListeners);

    // 解决插槽和强制更新
    if (needsForceUpdate) {
      vm.$slots = resolveSlots(renderChildren, parentVnode.context);
      vm.$forceUpdate();
    }

    {
      isUpdatingChildComponent = false;
    }
  }
  //判断是否直接激活
  function isInInactiveTree (vm) {
    while (vm && (vm = vm.$parent)) {
      if (vm._inactive) { return true }
    }
    return false
  }
  // 激活子组件
  function activateChildComponent (vm, direct) {
    if (direct) {
      vm._directInactive = false;
      //判断是否直接激活
      if (isInInactiveTree(vm)) {
        return
      }
    } else if (vm._directInactive) {
      return
    }
    if (vm._inactive || vm._inactive === null) {
      vm._inactive = false;
      // 循环激活 vm.$children
      for (var i = 0; i < vm.$children.length; i++) {
        activateChildComponent(vm.$children[i]);
      }
      // 调用 callHook(vm, 'activated')
      callHook(vm, 'activated');
    }
  }
  // 不激活组件
  function deactivateChildComponent (vm, direct) {
    if (direct) {
      vm._directInactive = true;
      if (isInInactiveTree(vm)) {
        return
      }
    }
    // 判断是否是直接不激活
    if (!vm._inactive) {
      vm._inactive = true;
      // 循环不激活 vm.$children
      for (var i = 0; i < vm.$children.length; i++) {
        deactivateChildComponent(vm.$children[i]);
      }
      // 调用 callHook(vm, "deactivated")
      callHook(vm, 'deactivated');
    }
  }
  // 先入栈操作，拿到 options.hook，处理错误问题，vm.$emit('hook:' + hook)，出栈操作
  function callHook (vm, hook) {
    // 在调用生命周期钩子时禁用dep收集
    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();
  }

  /*  */

  var MAX_UPDATE_COUNT = 100;

  var queue = [];
  var activatedChildren = [];
  var has = {};
  var circular = {};
  var waiting = false;
  var flushing = false;
  var index = 0;

  /**
   * 重置scheduler的状态.
   */
  function resetSchedulerState () {
    index = queue.length = activatedChildren.length = 0;
    has = {};
    {
      circular = {};
    }
    waiting = flushing = false;
  }

  // 需要在附加事件监听器时保存时间戳。但是，调用performance.now()会带来性能开销，
  // 尤其是当页面有数千个事件监听器时。相反，我们在调度程序每次刷新时获取一个时间戳，并将其用于刷新期间附加的所有事件监听器。
  var currentFlushTimestamp = 0;

  // 异步边缘情况修复需要存储事件侦听器的附加时间戳
  var getNow = Date.now;

  // 确定浏览器正在使用的事件时间戳。恼人的是，时间戳可以是高分辨率(相对于页面加载)，
  // 也可以是低分辨率(相对于UNIX epoch)，所以为了比较时间，
  // 我们必须在保存刷新时间戳时使用相同的时间戳类型。所有IE版本都使用低分辨率的事件时间戳，并且时钟实现存在问题
  if (inBrowser && !isIE) {
    var performance = window.performance;
    if (
      performance &&
      typeof performance.now === 'function' &&
      getNow() > document.createEvent('Event').timeStamp
    ) {
      // 如果事件时间戳(尽管在Date.now()之后计算)小于它，则意味着事件使用的是高分辨率时间戳，
      // 我们也需要为事件侦听器的时间戳使用高分辨率版本。
      getNow = function () { return performance.now(); };
    }
  }

  /**
   * 清空两个队列并运行监视器。
   * 据变化最终会把flushSchedulerQueue传入到nextTick中执行
   * 遍历执行watcher.run()方法，watcher.run()方法最终会完成视图更新
   */
  function flushSchedulerQueue () {
    currentFlushTimestamp = getNow();
    flushing = true;
    var watcher, id;

    //在刷新之前对队列进行排序。为了确保:
    // 1。组件从父组件更新到子组件。(因为父母总是
    //在child之前创建
    // 2。组件的用户监视器在它的呈现监视器之前运行(因为
    //用户观察者在渲染观察者之前创建)
    // 3。如果一个组件在父组件的监视程序运行期间被销毁，
    //它的观察者可以被跳过。
    queue.sort(function (a, b) { return a.id - b.id; });

    //不要缓存长度，因为可能会有更多的监视器被推送
    //我们运行现有的观察者
    for (index = 0; index < queue.length; index++) {
      watcher = queue[index];
      if (watcher.before) {
        watcher.before();
      }
      id = watcher.id;
      has[id] = null;
      watcher.run();
      // 在开发构建中，检查并停止循环更新。
      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
        }
      }
    }

    // 在重置状态之前保留帖子队列的副本
    var activatedQueue = activatedChildren.slice();
    var updatedQueue = queue.slice();

    resetSchedulerState();

    // 执行actived钩子函数
    callActivatedHooks(activatedQueue);
    //执行updated钩子函数
    callUpdatedHooks(updatedQueue);

    // devtool hook
    /* istanbul ignore if */
    if (devtools && config.devtools) {
      devtools.emit('flush');
    }
  }
  // 按索引递减的顺序执行_watcher关联实例的updated钩子
  function callUpdatedHooks (queue) {
    var i = queue.length;
    while (i--) {
      var watcher = queue[i];
      var vm = watcher.vm;
      if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'updated');
      }
    }
  }

  /**
   *队列一个在补丁期间激活的保持活动的组件。
   *队列将在整个树被修补后进行处理。
   */
  function queueActivatedComponent (vm) {
    //将_inactive设置为false，这样渲染函数就可以
    //依赖于检查它是否在一个非活动的树(例如路由器视图)
    vm._inactive = false;
    activatedChildren.push(vm);
  }

  function callActivatedHooks (queue) {
    for (var i = 0; i < queue.length; i++) {
      queue[i]._inactive = true;
      activateChildComponent(queue[i], true /* true */);
    }
  }

  /**
   * 将一个观察者推入观察者队列。具有重复id的作业将被跳过，除非它是在队列刷新时被推入。
   */
  function queueWatcher (watcher) {
    var id = watcher.id;
    if (has[id] == null) {
      has[id] = true;
      if (!flushing) {
        queue.push(watcher);
      } else {
        // 如果已经刷新，则根据其id拼接监视程序
        // 如果已经超过了它的id，它将立即运行下一个
        var i = queue.length - 1;
        while (i > index && queue[i].id > watcher.id) {
          i--;
        }
        queue.splice(i + 1, 0, watcher);
      }
      if (!waiting) {
        waiting = true;

        if (!config.async) {
          // 头尾插入代码来获取耗费时间
          flushSchedulerQueue();
          return
        }
        nextTick(flushSchedulerQueue);
      }
    }
  }

  /*  */



  var uid$2 = 0;

  /**
   * 观察者解析表达式，收集依赖项，并在表达式值改变时触发回调。这用于$watch() api和指令
   * Watcher 用于初始化数据的watcher的实列,他的原型上有个update用于派发更新
   */
  var Watcher = function Watcher (
    vm,
    expOrFn,
    cb,
    options,
    isRenderWatcher
  ) {
    this.vm = vm;
    if (isRenderWatcher) {
      vm._watcher = this;
    }
    vm._watchers.push(this);
    // options
    if (options) {
      this.deep = !!options.deep;
      this.user = !!options.user;
      this.lazy = !!options.lazy;
      this.sync = !!options.sync;
      this.before = options.before;
    } else {
      this.deep = this.user = this.lazy = this.sync = false;
    }
    this.cb = cb;
    this.id = ++uid$2; // uid for batching
    this.active = true;
    this.dirty = this.lazy; // 用于懒惰的观察者
    this.deps = [];
    this.newDeps = [];
    this.depIds = new _Set();
    this.newDepIds = new _Set();
    this.expression = expOrFn.toString();
    // getter的解析表达式
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn;
    } else {
      this.getter = parsePath(expOrFn);
      if (!this.getter) {
        this.getter = noop;
        warn(
          "Failed watching path: \"" + expOrFn + "\" " +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        );
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get();
  };

  /**
   * 评估getter，并重新收集依赖项。
   */
  Watcher.prototype.get = function get () {
    //将当前用户watch保存到Dep.target中
    pushTarget(this);
    var value;
    var vm = this.vm;
    try {
      //执行用户wathcer的getter()方法，此方法会将当前用户watcher作为订阅者订阅起来
      value = this.getter.call(vm, vm);
    } catch (e) {
      if (this.user) {
        handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
      } else {
        throw e
      }
    } finally {
      //"touch"每一个属性，所以他们都被跟踪
      //深度监视的依赖项
      if (this.deep) {
        traverse(value);
      }
      //恢复之前的watcher
      popTarget();
      this.cleanupDeps();
    }
    return value
  };

  /**
   *给这个指令添加一个依赖项.
   添加依赖（重点）
   */
  Watcher.prototype.addDep = function addDep (dep) {
    var id = dep.id;
    if (!this.newDepIds.has(id)) {
      //将依赖的每个dep，添加到 watcher 的 deps集合中，完成数据的收集
      this.newDepIds.add(id);
      this.newDeps.push(dep);
      if (!this.depIds.has(id)) {
        dep.addSub(this);
      }
    }
  };

  /**
   * 清理依赖项集合.
   */
  Watcher.prototype.cleanupDeps = function cleanupDeps () {
    var i = this.deps.length;
    while (i--) {
      var dep = this.deps[i];
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this);
      }
    }
    var tmp = this.depIds;
    this.depIds = this.newDepIds;
    this.newDepIds = tmp;
    this.newDepIds.clear();
    tmp = this.deps;
    // 把 this.deps = this.newDeps，缓存到 deps 里，然后清空newDeps，来做下一次的收集
    this.deps = this.newDeps;
    this.newDeps = tmp;
    this.newDeps.length = 0;
  };

  /**
   * 更新数据的方法，在派发更新的时候会用到。 computed 更新数据的时候，用 dep 的 notify 方法进 
   * 行更新数据，更新数据主要调用的是 run 方法
   */
  Watcher.prototype.update = function update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true;
    } else if (this.sync) {
      this.run();
    } else {
      queueWatcher(this);
    }
  };

  /**
   * 在这个阶段主要是运行get方法，拿到数据
   */
  Watcher.prototype.run = function run () {
    if (this.active) {
      var value = this.get();
      if (
        value !== this.value ||
        // 深度观察者和对象/数组的观察者应该发射，当值相同时，因为值可能有突变。
        isObject(value) ||
        this.deep
      ) {
        //设置新的值
        var oldValue = this.value;
        this.value = value;
        if (this.user) {
          var info = "callback for watcher \"" + (this.expression) + "\"";
          invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info);
        } else {
          this.cb.call(this.vm, value, oldValue);
        }
      }
    }
  };

  // 用来重新计算，更新缓存值，并重置 dirty 为false，表示缓存已更新
  Watcher.prototype.evaluate = function evaluate () {
    this.value = this.get();
     // 执行完更新函数之后，立即重置标志
    this.dirty = false;
  };

  /**
   * 深度收集依赖，computed 可以收集 computed 数据就是依靠这个方法
   */
  Watcher.prototype.depend = function depend () {
    var i = this.deps.length;
    while (i--) {
      //注意这里的 depend 方法是 Dep 原型上的方法，不是Watcher 的法
      this.deps[i].depend();
    }
  };

  /**
   * 从所有依赖项的订阅者列表中删除self
   */
  Watcher.prototype.teardown = function teardown () {
    if (this.active) {
      // 从vm的监视列表中移除self这是一个有点昂贵的操作，所以我们跳过它，如果vm正在被销毁。
      if (!this.vm._isBeingDestroyed) {
        remove(this.vm._watchers, this);
      }
      var i = this.deps.length;
      while (i--) {
        this.deps[i].removeSub(this);
      }
      this.active = false;
    }
  };

  //***************************************代理proxy*************************** */
  /* 初始化 */

  var sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: noop,
    set: noop
  };
  // 定义代理函数，target:当前对象,sourceKey:代理对象的名称,key:要访问的属性
  function proxy (target, sourceKey, key) {
    sharedPropertyDefinition.get = function proxyGetter () {
      //访问vm[message]，就返回vm[data][message]
      return this[sourceKey][key]
    };
    //设值vm[message]，就变成设值vm[data][message]
    sharedPropertyDefinition.set = function proxySetter (val) {
      this[sourceKey][key] = val;
    };
    //通过defineProperty对vm[message]进行拦截,并将拦截的set和get方法通过sharedPropertyDefinition传进去
    Object.defineProperty(target, key, sharedPropertyDefinition);
  }
  //初始化实例状态
  function initState (vm) {
    vm._watchers = [];
    var opts = vm.$options;
    //初始化props和methods
    if (opts.props) { initProps(vm, opts.props); }
    if (opts.methods) { initMethods(vm, opts.methods); }
    if (opts.data) {
      //把data属性注入到Vue实例上
      initData(vm);
    } else {
      // 调用observe(data)将data对象转化成响应式的对象
      observe(vm._data = {}, true /* asRootData */);
    }
    //初始化computed
    if (opts.computed) { initComputed(vm, opts.computed); }
    if (opts.watch && opts.watch !== nativeWatch) {
      //初始化watch
      initWatch(vm, opts.watch);
    }
  }

  function initProps (vm, propsOptions) {
    var propsData = vm.$options.propsData || {};
    var props = vm._props = {};
    // 缓存props的key，以便将来的道具更新可以使用Array进行迭代，而不是使用动态对象键枚举。
    var keys = vm.$options._propKeys = [];
    var isRoot = !vm.$parent;
    // 根实例道具需要被转换
    if (!isRoot) {
      toggleObserving(false);
    }
    var loop = function ( key ) {
      keys.push(key);
      //用来处理校验规范，设置默认值，取值传递过来得参数值等操作
      var value = validateProp(key, propsOptions, propsData, vm);
      /* istanbul ignore else */
      {
        var hyphenatedKey = hyphenate(key);
        if (isReservedAttribute(hyphenatedKey) ||
            config.isReservedAttr(hyphenatedKey)) {
          warn(
            ("\"" + hyphenatedKey + "\" is a reserved attribute and cannot be used as component prop."),
            vm
          );
        }
        // 来处理props中参数得响应式
        defineReactive$$1(props, key, value, function () {
          if (!isRoot && !isUpdatingChildComponent) {
            warn(
              "Avoid mutating a prop directly since the value will be " +
              "overwritten whenever the parent component re-renders. " +
              "Instead, use a data or computed property based on the prop's " +
              "value. Prop being mutated: \"" + key + "\"",
              vm
            );
          }
        });
      }
      // 在Vue.extend()期间，静态道具已经被代理到组件的原型上了，只需要在这里实例化时定义的代理道具。
      if (!(key in vm)) {
        proxy(vm, "_props", key);
      }
    };

    for (var key in propsOptions) loop( key );
    toggleObserving(true);
  }
  // 运行 observe 函数深度遍历数据中的每一个属性，进行数据劫持
  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 /* asRootData */);
  }
  
  function getData (data, vm) {
    // 在调用数据获取器时禁用dep收集
    pushTarget();
    try {
      return data.call(vm, vm)
    } catch (e) {
      handleError(e, vm, "data()");
      return {}
    } finally {
      popTarget();
    }
  }

  var computedWatcherOptions = { lazy: true };
  // 始化computed的时候(initComputed)，会监测数据是否已经存在data或props上，如果存在则抛出警告，
  // 否则调用defineComputed函数，监听数据，为组件中的属性绑定getter及setter。如果computed中属性的值是一个函数，
  // 则默认为属性的getter函数。此外属性的值还可以是一个对象，他只有三个有效字段set、get和cache，
  // 分别表示属性的setter、getter和是否启用缓存，其中get是必须的，cache默认为true

  function initComputed (vm, computed) {
    var watchers = vm._computedWatchers = Object.create(null);
    // 计算属性只是SSR时期的getter
    var isSSR = isServerRendering();

    for (var key in computed) {
      var userDef = computed[key];
      var getter = typeof userDef === 'function' ? userDef : userDef.get;
      if (getter == null) {
        warn(
          ("Getter is missing for computed property \"" + key + "\"."),
          vm
        );
      }

      if (!isSSR) {
        // 为computed属性创建内部监视器。
        watchers[key] = new Watcher(
          vm,
          getter || noop,
          noop,
          computedWatcherOptions
        );
      }

      // 如果定义的计算属性不在组件实例上，对属性进行数据劫持
      if (!(key in vm)) {
        defineComputed(vm, key, userDef);
      } else {
        // 如果定义的计算属性在data和props有，抛出警告
        if (key in vm.$data) {
          warn(("The computed property \"" + key + "\" is already defined in data."), vm);
        } else if (vm.$options.props && key in vm.$options.props) {
          warn(("The computed property \"" + key + "\" is already defined as a prop."), vm);
        } else if (vm.$options.methods && key in vm.$options.methods) {
          warn(("The computed property \"" + key + "\" is already defined as a method."), vm);
        }
      }
    }
  }
// 监听数据，为组件中的属性绑定getter及sette
  function defineComputed (
    target,
    key,
    userDef
  ) {
    var shouldCache = !isServerRendering();
    if (typeof userDef === 'function') {
      sharedPropertyDefinition.get = shouldCache
        ? createComputedGetter(key)
        : createGetterInvoker(userDef);
      sharedPropertyDefinition.set = noop;
    } else {
      sharedPropertyDefinition.get = userDef.get
        ? shouldCache && userDef.cache !== false
          ? createComputedGetter(key)
          : createGetterInvoker(userDef.get)
        : noop;
      sharedPropertyDefinition.set = userDef.set || noop;
    }
    if (sharedPropertyDefinition.set === noop) {
      sharedPropertyDefinition.set = function () {
        warn(
          ("Computed property \"" + key + "\" was assigned to but it has no setter."),
          this
        );
      };
    }
    Object.defineProperty(target, key, sharedPropertyDefinition);
  }
// 创建计算属性的getter函数computedGetter
  function createComputedGetter (key) {
    return function computedGetter () {
      var watcher = this._computedWatchers && this._computedWatchers[key];
      if (watcher) {
        if (watcher.dirty) {
          //watcher.evaluate中更新watcher的值，并把watcher.dirty设置为false
				//这样等下次依赖更新的时候才会把watcher.dirty设置为true，然后进行取值的时候才会再次运行这个函数
          watcher.evaluate();
        }
        //依赖追踪
        if (Dep.target) {
          watcher.depend();
        }
        return watcher.value
      }
    }
  }

  function createGetterInvoker(fn) {
    // 没有缓存则直接执行computed的getter函数
    return function computedGetter () {
      return fn.call(this, this)
    }
  }
// 绑定了所有method的this为vm
  function initMethods (vm, methods) {
    var props = vm.$options.props;
    for (var key in methods) {
      {
        if (typeof methods[key] !== 'function') {
          warn(
            "Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " +
            "Did you reference the function correctly?",
            vm
          );
        }
        if (props && hasOwn(props, key)) {
          warn(
            ("Method \"" + key + "\" has already been defined as a prop."),
            vm
          );
        }
        if ((key in vm) && isReserved(key)) {
          warn(
            "Method \"" + key + "\" conflicts with an existing Vue instance method. " +
            "Avoid defining component methods that start with _ or $."
          );
        }
      }
      vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
    }
  }
  // vm.$watch函数会直接使用Watcher构建观察者对象。watch中属性的值作为watcher.cb存在，在观察者update的时候，在watcher.run函数中执行
  function initWatch (vm, watch) {
    //遍历watch，为每一个属性创建侦听器
    for (var key in watch) {
      var handler = watch[key];
      //如果属性值是一个数组，则遍历数组，为属性创建多个侦听器
		//createWatcher函数中封装了vm.$watch，会在vm.$watch中创建侦听器
      if (Array.isArray(handler)) {
        for (var i = 0; i < handler.length; i++) {
          createWatcher(vm, key, handler[i]);
        }
      } else {
        //为属性创建侦听器
        createWatcher(vm, key, handler);
      }
    }
  }
  function createWatcher (
    vm,
    expOrFn,
    handler,
    options
  ) {
    //如果属性值是一个对象，则取对象的handler属性作为回调
    if (isPlainObject(handler)) {
      options = handler;
      handler = handler.handler;
    }
    //如果属性值是一个字符串，则从组件实例上寻找
    if (typeof handler === 'string') {
      handler = vm[handler];
    }
    //为属性创建侦听器
    return vm.$watch(expOrFn, handler, options)
  }

  function stateMixin (Vue) {
    // 在使用object . defineproperty时，flow在直接声明定义对象方面有一些问题，所以我们必须在这里过程地构建对象。
    // 定义了dataDef和propsDef，主要是用来设置响应式d a t a 和 data和data和props的get和set方法
    var dataDef = {};
    dataDef.get = function () { return this._data };
    var propsDef = {};
    propsDef.get = function () { return this._props };
    {
      dataDef.set = function () {
        warn(
          'Avoid replacing instance root $data. ' +
          'Use nested data properties instead.',
          this
        );
      };
      propsDef.set = function () {
        warn("$props is readonly.", this);
      };
    }
    Object.defineProperty(Vue.prototype, '$data', dataDef);
    Object.defineProperty(Vue.prototype, '$props', propsDef);

    Vue.prototype.$set = set;
    Vue.prototype.$delete = del;

    Vue.prototype.$watch = function (
      expOrFn,
      cb,
      options
    ) {
      var vm = this;
      if (isPlainObject(cb)) {
        return createWatcher(vm, expOrFn, cb, options)
      }
      options = options || {};
      options.user = true;
      options.user = true;
      //为需要观察的 expOrFn 添加watcher ，expOrFn的值有改变时执行cb，
      //在watcher的实例化的过程中会对expOrFn进行解析，并为expOrFn涉及到的data数据下的def添加该watcher
      var watcher = new Watcher(vm, expOrFn, cb, options);
      if (options.immediate) {
        var info = "callback for immediate watcher \"" + (watcher.expression) + "\"";
        pushTarget();
        invokeWithErrorHandling(cb, vm, [watcher.value], vm, info);
        popTarget();
      }
       //取消观察函数
      return function unwatchFn () {
        watcher.teardown();
      }
    };
  }

  /*  */

  var uid$3 = 0;

  function initMixin (Vue) {
    Vue.prototype._init = function (options) {
      var vm = this;
      // a uid
      vm._uid = uid$3++;

      var startTag, endTag;
      /* istanbul ignore if */
      if (config.performance && mark) {
        startTag = "vue-perf-start:" + (vm._uid);
        endTag = "vue-perf-end:" + (vm._uid);
        mark(startTag);
      }

      // 如果是Vue的实例，则不需要被observe
      vm._isVue = true;
      // 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
        );
      }
      /* istanbul ignore else */
      {
        initProxy(vm);
      }
      // expose real self
      vm._self = vm;
      // vm的生命周期相关变量初始化
      initLifecycle(vm);
      // vm的事件监听初始化
      initEvents(vm);
      // vm的编译render初始化
      initRender(vm);
      // vm的beforeCreate生命钩子的回调
      callHook(vm, 'beforeCreate');
      // vm在data/props初始化之前要进行绑定
      initInjections(vm); // resolve injections before data/props
      // vm的sate状态初始化
      initState(vm);
      // vm在data/props之后要进行提供
      initProvide(vm); // resolve provide after data/props
      // vm的created生命钩子的回调
      callHook(vm, 'created');

      /* istanbul ignore if */
      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);
      }
    };
  }
  // Vue初始化中的选项合并
  // 通过循环递归，找到Component这个类的继承链，然后把所有的配置都进行融合
  function initInternalComponent (vm, options) {
    var opts = vm.$options = Object.create(vm.constructor.options);
    // 该组件实例的vnode对象
    var parentVnode = options._parentVnode;
    opts.parent = options.parent;
    opts._parentVnode = parentVnode;

    var vnodeComponentOptions = parentVnode.componentOptions;
    opts.propsData = vnodeComponentOptions.propsData;
    opts._parentListeners = vnodeComponentOptions.listeners;
    opts._renderChildren = vnodeComponentOptions.children;
    opts._componentTag = vnodeComponentOptions.tag;

    if (options.render) {
      opts.render = options.render;
      opts.staticRenderFns = options.staticRenderFns;
    }
  }

  function resolveConstructorOptions (Ctor) {
    var options = Ctor.options;
    // 首先需要判断该类是否是Vue的子类
    if (Ctor.super) {
      var superOptions = resolveConstructorOptions(Ctor.super);
      var cachedSuperOptions = Ctor.superOptions;
       // 来判断父类中的options 有没有发生变化
      if (superOptions !== cachedSuperOptions) {
        // 超级选项改变，需要解决新的选项
        Ctor.superOptions = superOptions;
        // 检查是否有任何后期修改/附加的选项
        var modifiedOptions = resolveModifiedOptions(Ctor);
        // update base extend options
        if (modifiedOptions) {
          // 当为Vue混入一些options时，superOptions会发生变化，此时于之前子类中存储的cachedSuperOptions已经不相等，所以下面的操作主要就是更新sub.superOptions
          extend(Ctor.extendOptions, modifiedOptions);
        }
        options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions);
        if (options.name) {
          options.components[options.name] = Ctor;
        }
      }
    }
    return options
  }

  function resolveModifiedOptions (Ctor) {
    var modified;
    var latest = Ctor.options;
    // 执行Vue.extend时封装的"自身"options，这个属性就是方便检查"自身"的options有没有变化
    var sealed = Ctor.sealedOptions;
    // 遍历当前构造器上的options属性，如果在"自身"封装的options里没有，则证明是新添加的。执行if内的语句。
    // 调用dedupe方法，最终返回modified变量(即”自身新添加的options“)
  for (const key in latest) {
    for (var key in latest) {
      if (latest[key] !== sealed[key]) {
        if (!modified) { modified = {}; }
        modified[key] = latest[key];
      }
    }
    return modified
  }
}

  function Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }
  initMixin(Vue);// 初始化 Mixin
  stateMixin(Vue);// 状态 Mixin
  eventsMixin(Vue);// 事件 Mixin
  lifecycleMixin(Vue);// 生命周期 Mixin
  renderMixin(Vue);// 渲染 Mixin

  /*  Vue.use() 的注册本质上就是执行了一个 install 方法 */
  function initUse (Vue) {
    // 在全局api Vue 上定义了 use 方法，接收一个 plugin 参数
    Vue.use = function (plugin) {
      var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
      if (installedPlugins.indexOf(plugin) > -1) {
        return this
      }

      // 用来判断该插件是不是已经注册过，防止重复注册
      var args = toArray(arguments, 1);
      args.unshift(this);
      // 判断 Vue.use() 传入的第一个参数是 Object 还是 Function
      if (typeof plugin.install === 'function') {
        plugin.install.apply(plugin, args);
      } else if (typeof plugin === 'function') {
        plugin.apply(null, args);
      }
      installedPlugins.push(plugin);
      return this
    };
  }

  /* 将options和mixin合并 */

  function initMixin$1 (Vue) {
    Vue.mixin = function (mixin) {
      this.options = mergeOptions(this.options, mixin);
      return this
    };
  }

    /**
     * Vue.extend的原理以及初始化过程
     */

  function initExtend (Vue) {
    // 每个实例构造函数(包括Vue)都有一个唯一的cid。这使我们能够为原型继承创建包装子构造函数并缓存它们。
    Vue.cid = 0;
    var cid = 1;


    Vue.extend = function (extendOptions) {
      // extendOptions就是我我们传入的组件options
      extendOptions = extendOptions || {};
      var Super = this;
      var SuperId = Super.cid;
          // 每次创建完Sub构造函数后，都会把这个函数储存在extendOptions上的_Ctor中
          // 下次如果用再同一个extendOptions创建Sub时
          // 就会直接从_Ctor返回
      var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
      if (cachedCtors[SuperId]) {
        return cachedCtors[SuperId]
      }
      //校验组件 名
      var name = extendOptions.name || Super.options.name;
      if (name) {
        validateComponentName(name);
      }
      // 创建Sub构造函数
      var Sub = function VueComponent (options) {
        this._init(options);
      };
      // 继承Super，如果使用Vue.extend，这里的Super就是Vue
      Sub.prototype = Object.create(Super.prototype);
      Sub.prototype.constructor = Sub;
      Sub.cid = cid++;
      Sub.options = mergeOptions(
        Super.options,
        extendOptions
      );
       // 将组件的options和Vue的options合并，得到一个完整的options
    // 可以理解为将Vue的一些全局的属性，比如全局注册的组件和mixin，分给了Sub
      Sub['super'] = Super;

      // 将props和computed代理到了原型上
      if (Sub.options.props) {
        initProps$1(Sub);
      }
      if (Sub.options.computed) {
        initComputed$1(Sub);
      }

       // 继承Vue的global-api
      Sub.extend = Super.extend;
      Sub.mixin = Super.mixin;
      Sub.use = Super.use;

     // 继承assets的api，比如注册组件，指令，过滤器
      ASSET_TYPES.forEach(function (type) {
        Sub[type] = Super[type];
      });
      // 在components里添加一个自己
      if (name) {
        Sub.options.components[name] = Sub;
      }

      // 这些options保存起来
      Sub.superOptions = Super.options;
      Sub.extendOptions = extendOptions;
      Sub.sealedOptions = extend({}, Sub.options);

       // 设置缓存
      cachedCtors[SuperId] = Sub;
      return Sub
    };
  }
  //初始化自定义代理函数
  function initProps$1 (Comp) {
    var props = Comp.options.props;
    for (var key in props) {
      proxy(Comp.prototype, "_props", key);
    }
  }
  //为组件的属性绑定setter和getter属性
  function initComputed$1 (Comp) {
    var computed = Comp.options.computed;
    for (var key in computed) {
      defineComputed(Comp.prototype, key, computed[key]);
    }
  }

  /* 创建组件、指令、过滤器 */

  function initAssetRegisters (Vue) {
    //遍历 ASSET_TYPES 数组，为Vue 定义相应的方法
    // ASSET_TYPES 包含 directive  component  filter
    ASSET_TYPES.forEach(function (type) {
      Vue[type] = function (
        id,
        definition
      ) {
         // 判断是否有第二个参数，没有的话去之前的option的组件或者指令
        if (!definition) {
          return this.options[type + 's'][id]
        } else {
          //判断是否是一个组件，校验组件名字
          if (type === 'component') {
            validateComponentName(id);
          }
           // 判断传入的是不是一个原始对象
          if (type === 'component' && isPlainObject(definition)) {
            definition.name = definition.name || id;
            // 把组件配置转换为组件的构造函数
            definition = this.options._base.extend(definition);
          }
          if (type === 'directive' && typeof definition === 'function') {
            definition = { bind: definition, update: definition };
          }
           // 全局注册，存储资源赋值
          this.options[type + 's'][id] = definition;
          return definition
        }
      };
    });
  }
//获取组件的名字
  function getComponentName (opts) {
    return opts && (opts.Ctor.options.name || opts.tag)
  }
  // 检测name是否匹配
  function matches (pattern, name) {
    if (Array.isArray(pattern)) {
      return pattern.indexOf(name) > -1
    } else if (typeof pattern === 'string') {
      return pattern.split(',').indexOf(name) > -1
    } else if (isRegExp(pattern)) {
      return pattern.test(name)
    }
    /* istanbul ignore next */
    return false
  }

  function pruneCache (keepAliveInstance, filter) {
    //获取keepAliveInstance的缓存
    var cache = keepAliveInstance.cache;
    var keys = keepAliveInstance.keys;
    var _vnode = keepAliveInstance._vnode;
    for (var key in cache) {
      var entry = cache[key];
      if (entry) {
        var name = entry.name;
        // name不符合filter条件的，同时不是目前渲染的vnode时，销毁vnode对应的组件实例（Vue实例），并从cache中移除
        if (name && !filter(name)) {
          //pruneCache 函数的核心就是去调用pruneCacheEntry
          pruneCacheEntry(cache, key, keys, _vnode);
        }
      }
    }
  }

  function pruneCacheEntry (
    cache,
    key,
    keys,
    current
  ) {
    // 通过cached$$1 = cache[key]` 获取头部数据对应的值 `vnode`，执行 `cached$$1.componentInstance.$destroy() 将组件实例销毁
    var entry = cache[key];
    if (entry && (!current || entry.tag !== current.tag)) {
      // 销毁vnode对应的组件实例
      entry.componentInstance.$destroy();
    }
    // 清空组件对应的缓存节点
    cache[key] = null;
    // 删除缓存中的头部数据 keys[0]
    remove(keys, key);
  }

  var patternTypes = [String, RegExp, Array];

  var KeepAlive = {
    name: 'keep-alive',
    // 抽象组件，判断当前组件虚拟dom是否渲染成真实dom的关键
    abstract: true,
  // 定义include、exclude及max属性
  // include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  // exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  // max - 数字。最多可以缓存多少组件实例。
    props: {
      include: patternTypes,
      exclude: patternTypes,
      max: [String, Number]
    },

    methods: {
      cacheVNode: function cacheVNode() {
        var ref = this;
        var cache = ref.cache;
        var keys = ref.keys;
        var vnodeToCache = ref.vnodeToCache;
        var keyToCache = ref.keyToCache;
        if (vnodeToCache) {
          var tag = vnodeToCache.tag;
          var componentInstance = vnodeToCache.componentInstance;
          var componentOptions = vnodeToCache.componentOptions;
          cache[keyToCache] = {
            name: getComponentName(componentOptions),
            tag: tag,
            componentInstance: componentInstance,
          };
          keys.push(keyToCache);
          // prune oldest entry
          if (this.max && keys.length > parseInt(this.max)) {
            pruneCacheEntry(cache, keys[0], keys, this._vnode);
          }
          this.vnodeToCache = null;
        }
      }
    },
    //在 keep-alive 的创建阶段， created钩子会创建一个cache对象，用来保存vnode节点
    created: function created () {
      this.cache = Object.create(null);
      this.keys = [];
    },
    // 在销毁阶段，destroyed 钩子则会调用pruneCacheEntry方法清除cache缓存中的所有组件实例
    destroyed: function destroyed () {
      for (var key in this.cache) {
        // 销毁vnode对应的组件实例
        pruneCacheEntry(this.cache, key, this.keys);
      }
    },

    mounted: function mounted () {
      var this$1 = this;

      this.cacheVNode();
      // 通过 watch 来监听 include 和 exclude，在其改变时调用 pruneCache 以修改 cache 缓存中的缓存数据
      this.$watch('include', function (val) {
        pruneCache(this$1, function (name) { return matches(val, name); });
      });
      this.$watch('exclude', function (val) {
        pruneCache(this$1, function (name) { return !matches(val, name); });
      });
    },

    updated: function updated () {
      this.cacheVNode();
    },
    // 渲染阶段
    render: function render () {
      var slot = this.$slots.default;
      // 得到slot插槽中的第一个组件
      var vnode = getFirstComponentChild(slot);
      var componentOptions = vnode && vnode.componentOptions;
      if (componentOptions) {
        //获取组件名称，优先获取组件的name字段，否则是组件的tag
        var name = getComponentName(componentOptions);
        var ref = this;
        var include = ref.include;
        var exclude = ref.exclude;
        if (
         // 不需要缓存，则返回 vnode
          (include && (!name || !matches(include, name))) ||
          // excluded
          (exclude && name && matches(exclude, name))
        ) {
          return vnode
        }

        var ref$1 = this;
        var cache = ref$1.cache;
        var keys = ref$1.keys;
        var key = vnode.key == null
        // 同一个构造函数可能会被注册为不同的本地组件，所以单独使用cid是不够的
          ? componentOptions.Ctor.cid + (componentOptions.tag ? ("::" + (componentOptions.tag)) : '')
          : vnode.key;
        if (cache[key]) {
           // 有缓存则取缓存的组件实例
          vnode.componentInstance = cache[key].componentInstance;
          // make current key freshest
          remove(keys, key);
          keys.push(key);
        } else {
           // 无缓存则创建缓存
          this.vnodeToCache = vnode;
          this.keyToCache = key;
        }
          // keepAlive标记
        vnode.data.keepAlive = true;
      }
      return vnode || (slot && slot[0])
    }
  };

  var builtInComponents = {
    KeepAlive: KeepAlive
  };

  // 初始化全局API
  function initGlobalAPI (Vue) {
    // config
    var configDef = {};
    // 给configDef添加了一个get属性，这个属性返回得是一个config对象，这个cofig对象里面，有n个属性
    configDef.get = function () { return config; };
    {
      // 给configDef添加了一个set属性,返回的一个警告
      configDef.set = function () {
        warn(
          'Do not replace the Vue.config object, set individual fields instead.'
        );
      };
    }
    // 为Vue的构造函数，添加一个要通过Object.defineProperty监听的属性config
    Object.defineProperty(Vue, 'config', configDef);

    // 公开util
    // 设置了一个公开的util对象，但是它不是公共的api，避免依赖
    Vue.util = {
      warn: warn,
      extend: extend,
      mergeOptions: mergeOptions,
      defineReactive: defineReactive$$1
    };
    // 绑定全局API——Vue.set，Vue.delete，Vue.nextTick
    Vue.set = set;
    Vue.delete = del;
    Vue.nextTick = nextTick;

    // 2.6 explicit observable API
    Vue.observable = function (obj) {
      observe(obj);
      return obj
    };

    Vue.options = Object.create(null);
    ASSET_TYPES.forEach(function (type) {
      Vue.options[type + 's'] = Object.create(null);
    });

    // 这用于标识“基”构造函数，以便在Weex的多实例场景中扩展所有普通对象组件
    Vue.options._base = Vue;

    extend(Vue.options.components, builtInComponents);
    // 初始化Vue.extend，Vue.mixin，Vue.extend
    // AssetRegisters就是component，directive，filter三者
    initUse(Vue);
    initMixin$1(Vue);
    initExtend(Vue);
    initAssetRegisters(Vue);
  }

  initGlobalAPI(Vue);
  // vue.prototype上挂载$isServer、$ssrContext、FunctionalRenderContext
  Object.defineProperty(Vue.prototype, '$isServer', {
    get: isServerRendering
  });

  Object.defineProperty(Vue.prototype, '$ssrContext', {
    get: function get () {
      /* istanbul ignore next */
      return this.$vnode && this.$vnode.ssrContext
    }
  });

  //为ssr运行时助手安装暴露FunctionalRenderContext
  Object.defineProperty(Vue, 'FunctionalRenderContext', {
    value: FunctionalRenderContext
  });
  // 在vue 上挂载 version 属性
  Vue.version = '2.6.14';
  //检验是否存在'style','class'字符串
  var isReservedAttr = makeMap('style,class');

  // 应该使用props进行绑定的属性
  //检验是否存在'input','textarea','option','select','progress'字符串
  var acceptValue = makeMap('input,textarea,option,select,progress');
  //校验元素值是否通过prop指定
  var mustUseProp = function (tag, type, attr) {
    return (
      (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
      (attr === 'selected' && tag === 'option') ||
      (attr === 'checked' && tag === 'input') ||
      (attr === 'muted' && tag === 'video')
    )
  };
//检验是否存在'contenteditable','draggable','spellcheck'字符串
  var isEnumeratedAttr = makeMap('contenteditable,draggable,spellcheck');
//检验是否存在'events','caret','typing','plaintext-only'字符串
  var isValidContentEditableValue = makeMap('events,caret,typing,plaintext-only');

  var convertEnumeratedValue = function (key, value) {
    return isFalsyAttrValue(value) || value === 'false'
      ? 'false'
      // 允许content - itable的任意字符串值
      : key === 'contenteditable' && isValidContentEditableValue(value)
        ? value
        : 'true'
  };
//校验是否包含以下字符串
  var isBooleanAttr = makeMap(
    'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +
    'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
    'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
    'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
    'required,reversed,scoped,seamless,selected,sortable,' +
    'truespeed,typemustmatch,visible'
  );

  var xlinkNS = 'http://www.w3.org/1999/xlink';

  var isXlink = function (name) {
    return name.charAt(5) === ':' && name.slice(0, 5) === 'xlink'
  };

  var getXlinkProp = function (name) {
    return isXlink(name) ? name.slice(6, name.length) : ''
  };
  // 通过isFalsyAttrValue方法判断值是否是false与null，如果isFalsyAttrValue返回为true则表示传入的值
  var isFalsyAttrValue = function (val) {
    return val == null || val === false
  };

  /* class 转码获取vonde 中的staticClass 静态class 和class动态class转义成真实dom需要的class格式。然后返回class字符串 */
  function genClassForVnode (vnode) {
    var data = vnode.data;
    var parentNode = vnode;
    var childNode = vnode;
    while (isDef(childNode.componentInstance)) {
      childNode = childNode.componentInstance._vnode;
      if (childNode && childNode.data) {
        data = mergeClassData(childNode.data, data);
      }
    }
    while (isDef(parentNode = parentNode.parent)) {
      if (parentNode && parentNode.data) {
        data = mergeClassData(data, parentNode.data);
      }
    }
    // 
    return renderClass(data.staticClass, data.class)
  }

  function mergeClassData (child, parent) {
    return {
      staticClass: concat(child.staticClass, parent.staticClass),
      class: isDef(child.class)
        ? [child.class, parent.class]
        : parent.class
    }
  }
  // 渲染calss 这里获取到已经转码的calss
  function renderClass (
    staticClass,
    dynamicClass
  ) {
    if (isDef(staticClass) || isDef(dynamicClass)) {
      // 转码 class，把数组格式，对象格式的calss 全部转化成 字符串格式
      return concat(staticClass, stringifyClass(dynamicClass))
    }
    /* istanbul ignore next */
    return ''
  }

  function concat (a, b) {
    return a ? b ? (a + ' ' + b) : a : (b || '')
  }
  // 转码 class，把数组格式，对象格式的calss 全部转化成 字符串格式
  function stringifyClass (value) {
    if (Array.isArray(value)) {
      // 数组字符串变成字符串，然后用空格 隔开 拼接 起来变成字符串
      return stringifyArray(value)
    }
    if (isObject(value)) {
      // 对象字符串变成字符串，然后用空格 隔开 拼接 起来变成字符串
      return stringifyObject(value)
    }
    if (typeof value === 'string') {
      return value
    }
    /* istanbul ignore next */
    return ''
  }
  // 数组字符串变成字符串，然后用空格 隔开 拼接 起来变成字符串
  function stringifyArray (value) {
    var res = '';
    var stringified;
    for (var i = 0, l = value.length; i < l; i++) {
      if (isDef(stringified = stringifyClass(value[i])) && stringified !== '') {
        if (res) { res += ' '; }
        res += stringified;
      }
    }
    return res
  }
// 对象字符串变成字符串，然后用空格 隔开 拼接 起来变成字符串
  function stringifyObject (value) {
    var res = '';
    for (var key in value) {
      if (value[key]) {
        if (res) { res += ' '; }
        res += key;
      }
    }
    return res
  }

  /*  */

  var namespaceMap = {
    svg: 'http://www.w3.org/2000/svg',
    math: 'http://www.w3.org/1998/Math/MathML'
  };
//判断html标签
  var isHTMLTag = makeMap(
    'html,body,base,head,link,meta,style,title,' +
    'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
    'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +
    'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
    's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
    'embed,object,param,source,canvas,script,noscript,del,ins,' +
    'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
    'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
    'output,progress,select,textarea,' +
    'details,dialog,menu,menuitem,summary,' +
    'content,element,shadow,template,blockquote,iframe,tfoot'
  );

  //判断svg 标签
  var isSVG = makeMap(
    'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +
    'foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
    'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
    true
  );
  // 判断tag是不是pre
  var isPreTag = function (tag) { return tag === 'pre'; };
 // 判断tag是不是html标签或者svg标签
  var isReservedTag = function (tag) {
    return isHTMLTag(tag) || isSVG(tag)
  };
  function getTagNamespace (tag) {
    if (isSVG(tag)) {
      return 'svg'
    }
    // 对MathML的基本支持注意，它不支持其他MathML元素作为组件根
    if (tag === 'math') {
      return 'math'
    }
  }

  var unknownElementCache = Object.create(null);
  // 检查dom 节点的tag标签 类型 是否是VPre 标签 或者是判断是否是浏览器自带原有的标签
  function isUnknownElement (tag) {
    /* istanbul ignore if */
    if (!inBrowser) {
      return true
    }
    // 判断tag是不是html标签或者svg标签
    if (isReservedTag(tag)) {
      return false
    }
    tag = tag.toLowerCase();
    /* istanbul ignore if */
    if (unknownElementCache[tag] != null) {
      return unknownElementCache[tag]
    }
    var el = document.createElement(tag);
    if (tag.indexOf('-') > -1) {
      // http://stackoverflow.com/a/28210364/1070244
      return (unknownElementCache[tag] = (
        el.constructor === window.HTMLUnknownElement ||
        el.constructor === window.HTMLElement
      ))
    } else {
      return (unknownElementCache[tag] = /HTMLUnknownElement/.test(el.toString()))
    }
  }

  var isTextInputType = makeMap('text,number,password,search,email,tel,url');

  /*  */

  /**
   * 查询一个元素选择器，如果他不是元素选择器则创建div
   */
  function query (el) {
    if (typeof el === 'string') {
      var selected = document.querySelector(el);
      if (!selected) {
        warn(
          'Cannot find element: ' + el
        );
        return document.createElement('div')
      }
      return selected
    } else {
      return el
    }
  }

  //创建一个真实的dom
  function createElement$1 (tagName, vnode) {
    var elm = document.createElement(tagName);
    if (tagName !== 'select') {
      return elm
    }
    // False或null将删除该属性，但undefined不会
    if (vnode.data && vnode.data.attrs && vnode.data.attrs.multiple !== undefined) {
      elm.setAttribute('multiple', 'multiple');
    }
    return elm
  }
  // 创建由tagName 指定的HTML元素
  function createElementNS (namespace, tagName) {
    return document.createElementNS(namespaceMap[namespace], tagName)
  }
  // 创建文本节点
  function createTextNode (text) {
    return document.createTextNode(text)
  }
  // 创建一个注释节点
  function createComment (text) {
    return document.createComment(text)
  }
  // 插入节点 在某个元素前面插入一个节点
  function insertBefore (parentNode, newNode, referenceNode) {
    parentNode.insertBefore(newNode, referenceNode);
  }
  // 删除子节点
  function removeChild (node, child) {
    node.removeChild(child);
  }
  //添加子节点 尾部
  function appendChild (node, child) {
    node.appendChild(child);
  }
  // 获取父亲子节点dom
  function parentNode (node) {
    return node.parentNode
  }
  //获取下一个兄弟节点
  function nextSibling (node) {
    return node.nextSibling
  }
  //获取dom标签名称
  function tagName (node) {
    return node.tagName
  }
   //设置dom 文本
  function setTextContent (node, text) {
    node.textContent = text;
  }
  //设置组建样式的作用域
  function setStyleScope (node, scopeId) {
    node.setAttribute(scopeId, '');
  }
  // Object.freeze冻结对象
  var nodeOps = /*#__PURE__*/Object.freeze({
    createElement: createElement$1,
    createElementNS: createElementNS,
    createTextNode: createTextNode,
    createComment: createComment,
    insertBefore: insertBefore,
    removeChild: removeChild,
    appendChild: appendChild,
    parentNode: parentNode,
    nextSibling: nextSibling,
    tagName: tagName,
    setTextContent: setTextContent,
    setStyleScope: setStyleScope
  });

  /* ref是给元素或者子组件注册引用信息的 */

  var ref = {
    create: function create (_, vnode) {
      registerRef(vnode);
    },
    update: function update (oldVnode, vnode) {
      if (oldVnode.data.ref !== vnode.data.ref) {
        registerRef(oldVnode, true);
        registerRef(vnode);
      }
    },
    destroy: function destroy (vnode) {
      registerRef(vnode, true);
    }
  };
  // ref模块初始化时会执行registerRef函数
  function registerRef (vnode, isRemoval) {
    var key = vnode.data.ref;
    //如果没有定义ref属性，则直接返回
    if (!isDef(key)) { return }
    //当前的根Vue实例
    var vm = vnode.context;
     //优先获取vonde的组件实例(对于组件来说)，或者el(该Vnode对应的DOM节点，非组件来说)
    var ref = vnode.componentInstance || vnode.elm;
    var refs = vm.$refs;
    if (isRemoval) {
      if (Array.isArray(refs[key])) {
        remove(refs[key], ref);
      } else if (refs[key] === ref) {
        refs[key] = undefined;
      }
    } else {
       //如果不是移除,当在v-for之内时，则保存为数组形式
      if (vnode.data.refInFor) {
        if (!Array.isArray(refs[key])) {
          refs[key] = [ref];
        } else if (refs[key].indexOf(ref) < 0) {
          // $flow-disable-line
          refs[key].push(ref);
        }
         //不是在v-for之内时,直接保存到refs对应的key属性上
      } else {
        refs[key] = ref;
      }
    }
  }

  /**
   * Virtual DOM patching algorithm based on Snabbdom by
   * Simon Friis Vindum (@paldepind)
   * Licensed under the MIT License
   * https://github.com/paldepind/snabbdom/blob/master/LICENSE
   *
   * modified by Evan You (@yyx990803)
   *
   * Not type-checking this because this file is perf-critical and the cost
   * of making flow understand it is not worth it.
   */

  var emptyNode = new VNode('', {}, []);

  var hooks = ['create', 'activate', 'update', 'remove', 'destroy'];
  // 判断当前VNode可复用,销毁一个DOM节点并创建一个新的再插入是消耗非常大的，
  // 无论是DOM对象本身的复杂性还是操作引起的重绘重排，所以虚拟DOM的目标是尽可能复用现有DOM进行更新
  function sameVnode (a, b) {
    return (
      a.key === b.key &&
      a.asyncFactory === b.asyncFactory && (
        (
          a.tag === b.tag &&
          a.isComment === b.isComment &&
          // 这个涉及属性的更新，如果一个节点没有任何属性，即data为undefined，与一个有data属性的节点进行更新不如直接渲染一个新的
          isDef(a.data) === isDef(b.data) &&
          // 这个主要是input标签type属性异同判断，不同的type相当于不同的tag
          sameInputType(a, b)
        ) || (
          isTrue(a.isAsyncPlaceholder) &&
          isUndef(b.asyncFactory.error)
        )
      )
    )
  }
  //这个主要是input标签type属性异同判断，不同的type相当于不同的tag
  function sameInputType (a, b) {
    if (a.tag !== 'input') { return true }
    var i;
    var typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type;
    var typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type;
    return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
  }
  // 接收一个 children 数组，生成 key 与 index 索引对应的一个 map 表
  function createKeyToOldIdx (children, beginIdx, endIdx) {
    var i, key;
    var map = {};
    for (i = beginIdx; i <= endIdx; ++i) {
      key = children[i].key;
      if (isDef(key)) { map[key] = i; }
    }
    return map
  }
  // patch核心函数
  // backend的nodeOps是节点的功能函数，包括createElement创建元素、removeChild删除子元素，
  // tagName获取到标签名等，backend的modules是vue框架用于分别执行某个渲染任务的功能函数
  function createPatchFunction (backend) {
    var i, j;
    var cbs = {};

    var modules = backend.modules;
    var nodeOps = backend.nodeOps;
    // 循环hooks和modules
    for (i = 0; i < hooks.length; ++i) {
      cbs[hooks[i]] = [];
      for (j = 0; j < modules.length; ++j) {
        if (isDef(modules[j][hooks[i]])) {
          cbs[hooks[i]].push(modules[j][hooks[i]]);
        }
      }
    }
    // 将原有的节点，同时也是DOM节点包装成虚拟节点
    function emptyNodeAt (elm) {
      return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
    }
    // 创建remove函数
    // remove$$1函数作为一个对象，第一个参数是vnode所属的dom元素，第二个参数是监听器个数。
    // 内部实现remove函数拥有listeners属性，等到这个属性的值每一次减少直到0时将直接移除节点
    function createRmCb (childElm, listeners) {
      function remove$$1 () {
        if (--remove$$1.listeners === 0) {
          removeNode(childElm);
        }
      }
      remove$$1.listeners = listeners;
      return remove$$1
    }
    // 移除节点，先找到父节点，然后通过removeChild移除掉这个节点
    function removeNode (el) {
      var parent = nodeOps.parentNode(el);
      // 元素可能已经由于v-html / v-text而被删除
      if (isDef(parent)) {
        nodeOps.removeChild(parent, el);
      }
    }
    function isUnknownElement$$1 (vnode, inVPre) {
      return (
        !inVPre &&
        !vnode.ns &&
        !(
          config.ignoredElements.length &&
          config.ignoredElements.some(function (ignore) {
            return isRegExp(ignore)
              ? ignore.test(vnode.tag)
              : ignore === vnode.tag
          })
        ) &&
        // 检测是否未知el
        config.isUnknownElement(vnode.tag)
      )
    }

    var creatingElmInVPre = 0;
    // 创建新节点
    function createElm (
      vnode,
      insertedVnodeQueue,
      parentElm,
      refElm,
      nested,
      ownerArray,
      index
    ) {
      if (isDef(vnode.elm) && isDef(ownerArray)) {
        //这个vnode在以前的渲染中使用过,现在它被用作一个新节点，覆盖它的榆树将导致
        //当它被用作插入时，潜在的补丁错误,引用节点。相反，我们在创建节点之前按需克隆节点对应的DOM元素。
        vnode = ownerArray[index] = cloneVNode(vnode);
      }

      vnode.isRootInsert = !nested; //过渡进入检查
      if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
        return
      }

      var data = vnode.data;
      var children = vnode.children;
      var tag = vnode.tag;
      if (isDef(tag)) {
        {
          if (data && data.pre) {
            creatingElmInVPre++;
          }
          if (isUnknownElement$$1(vnode, creatingElmInVPre)) {
            warn(
              'Unknown custom element: <' + tag + '> - did you ' +
              'register the component correctly? For recursive components, ' +
              'make sure to provide the "name" option.',
              vnode.context
            );
          }
        }

        vnode.elm = vnode.ns
          ? nodeOps.createElementNS(vnode.ns, tag)
          : nodeOps.createElement(tag, vnode);
        setScope(vnode);

        /* istanbul ignore if */
        {
          createChildren(vnode, children, insertedVnodeQueue);
          if (isDef(data)) {
            invokeCreateHooks(vnode, insertedVnodeQueue);
          }
          insert(parentElm, vnode.elm, refElm);
        }

        if (data && data.pre) {
          creatingElmInVPre--;
        }
      } else if (isTrue(vnode.isComment)) {
        vnode.elm = nodeOps.createComment(vnode.text);
        insert(parentElm, vnode.elm, refElm);
      } else {
        vnode.elm = nodeOps.createTextNode(vnode.text);
        insert(parentElm, vnode.elm, refElm);
      }
    }

    function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
      var i = vnode.data;
      if (isDef(i)) {
        var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;
        if (isDef(i = i.hook) && isDef(i = i.init)) {
          i(vnode, false /* hydrating */);
        }
        // 调用init钩子后，如果vnode是子组件它应该创建一个子实例并挂载它。这个子组件也设置了占位符vnode的榆树。
        //在这种情况下，我们只需要返回元素就可以了。
        if (isDef(vnode.componentInstance)) {
          initComponent(vnode, insertedVnodeQueue);
          insert(parentElm, vnode.elm, refElm);
          if (isTrue(isReactivated)) {
            reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);
          }
          return true
        }
      }
    }

    function initComponent (vnode, insertedVnodeQueue) {
      if (isDef(vnode.data.pendingInsert)) {
        insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert);
        vnode.data.pendingInsert = null;
      }
      vnode.elm = vnode.componentInstance.$el;
      
      if (isPatchable(vnode)) {
        // div#app的创建时会调用invokeCreateHooks
        invokeCreateHooks(vnode, insertedVnodeQueue);
        setScope(vnode);
      } else {
        // 根空的组件。跳过所有元素相关的模块，除了ref
        registerRef(vnode);
        // 确保调用了插入钩子
        insertedVnodeQueue.push(vnode);
      }
    }

    function reactivateComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
      var i;
      // 重新激活的内部转换组件不触发，因为内部节点创建的钩子没有被调用一次。
      var innerNode = vnode;
      while (innerNode.componentInstance) {
        innerNode = innerNode.componentInstance._vnode;
        if (isDef(i = innerNode.data) && isDef(i = i.transition)) {
          for (i = 0; i < cbs.activate.length; ++i) {
            cbs.activate[i](emptyNode, innerNode);
          }
          insertedVnodeQueue.push(innerNode);
          break
        }
      }
      // 与新创建的组件不同，重新激活的keep-alive组件不插入自己
      insert(parentElm, vnode.elm, refElm);
    }
    // 通过insertBefore或者appendChild添加元素
    function insert (parent, elm, ref$$1) {
      if (isDef(parent)) {
        if (isDef(ref$$1)) {
          if (nodeOps.parentNode(ref$$1) === parent) {
            nodeOps.insertBefore(parent, elm, ref$$1);
          }
        } else {
          nodeOps.appendChild(parent, elm);
        }
      }
    }