const addRemote = async (a, b) => new Promise(resolve => {
  setTimeout(() => resolve(a + b), 1000)
})

async function add(...args) {
  if (args.length <= 1) return Promise.resolve(...args);

  if (args.length === 2) {
    return addRemote(args[0], args[1]);
  }

  const promiseList = [];

  for (let i = 0; i < args.length ; i+=2) {
    promiseList.push(addRemote(args[i], args[i + 1] || 0))
  }

  const res = await Promise.all(promiseList);
  return add(...res);
}

// test
add(1, 2).then(res => {
  console.log(res);
})

add(1, 2, 3, 4, 5, 6, 7).then(res => {
  console.log(res);
})

export const elDraggableDialog = {
  bind(el, _, vnode) {
    const dragDom = el.querySelector('.el-dialog');
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    dragDom.style.cssText += ';top:0px;';
    dialogHeaderEl.style.cssText += ';cursor:move;';

    dialogHeaderEl.onmousedown = (e) => {
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      const dragDomWidth = dragDom.offsetWidth;
      const dragDomHeight = dragDom.offsetHeight;

      const screenWidth = document.body.clientWidth;
      const screenHeight = document.body.clientHeight;

      const minDragDomLeft = dragDom.offsetLeft;
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;

      const minDragDomTop = dragDom.offsetTop;
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight;

      const styleLeftStr = getComputedStyle(dragDom).left;
      const styleTopStr = getComputedStyle(dragDom).top;
      if (!styleLeftStr || !styleTopStr) return
      let styleLeft;
      let styleTop;

      // Format may be "##%" or "##px"
      if (styleLeftStr.includes('%')) {
        styleLeft = +document.body.clientWidth * (+styleLeftStr.replace(/%/g, '') / 100);
        styleTop = +document.body.clientHeight * (+styleTopStr.replace(/%/g, '') / 100);
      } else {
        styleLeft = +styleLeftStr.replace(/px/g, '');
        styleTop = +styleTopStr.replace(/px/g, '');
      }

      document.onmousemove = (e) => {
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        // Handle edge cases
        if (-(left) > minDragDomLeft) {
          left = -minDragDomLeft;
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft;
        }
        if (-(top) > minDragDomTop) {
          top = -minDragDomTop;
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop;
        }

        // Move current element
        dragDom.style.cssText += `;left:${left + styleLeft}px;top:${top + styleTop}px;`;

        // Emit on-dialog-drag event
        // See https://stackoverflow.com/questions/49264426/vuejs-custom-directive-emit-event
        if (vnode.componentInstance) {
          vnode.componentInstance.$emit('on-dialog-drag');
        } else if (vnode.elm) {
          vnode.elm.dispatchEvent(new CustomEvent('on-dialog-drag'));
        }
      }

      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
}

// Vue.directive('el-draggable-dialog', elDraggableDialog); // v-el-draggable-dialog

// ESModule 编译前
export default 123;

export const a = 123;

const b = 3;
const c = 4;
export { b, c};

// 经过 babel 编译为 CommonJS 后
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.c = exports.b = exports.a = exports.default = void 0;
var _default = 123;
exports.default = _default;
var a = 123;
exports.a = a;
var b = 3;
exports.b = b;
var c = 4;
exports.c = c;

// a.js
const a = 123;
export default a;

// b.js
import a from './a.js';

// <=> 相当与

// a.js
const a = 123;
export {
  a as default
};

//b.js
import { default as a } from './a.js';

// ESModule 编译前
import a from './a.js'

a.test();

// 经过 babel 编译为 CommonJS 后
"use strict";

var _a = _interopRequireDefault(require("./a.js"));

function _interopRequireDefault(obj) { 
  return obj && obj.__esModule ? obj : { default: obj };
}

_a.default.test();

// CommonJs 编译前
const a = require('./a.js')

a.test()

// 经过 babel 编译为 CommonJS 后
"use strict";

var a = require('./a.js');

a.test();

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  //...
}

export function getData (data: Function, vm: Component): any {
  // #7573 disable dep collection when invoking data getters
  pushTarget()
  try {
    return data.call(vm, vm)
  } catch (e) {
    handleError(e, vm, `data()`)
    return {}
  } finally {
    popTarget()
  }
}

Dep.target = null

const targetStack = []

export function pushTarget (_target: ?Watcher) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

export function popTarget () {
  Dep.target = targetStack.pop()
}

export function callHook (vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm)
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()
}

const loaderUtils = require('loader-utils');
const formatSource = require('./formatSource.js');

module.exports = function (source) {
  try {
    const {
      // 模块所在的根目录
      rootContext: rootPath,
      // 资源文件路径
      resourcePath: filePath,
    } = this;

    /**
     * example:
     * rootPath: /home/xxx/project
     * filePath: /home/xxx/project/src/ooo/xxx.js
     * relativePath: src/ooo/xxx.js
     */
    const relativePath = filePath.slice(rootPath.length + 1);

    const options = loaderUtils.getOptions(this);

    if ((options.exclude || []).length > 0) {
      const isSkip = options.exclude.some((path) => filePath.includes(path));
      if (isSkip) {
        return source;
      }
    }

    const code = formatSource(source, relativePath);
    return code;
  } catch (error) {
    console.error('\nvue-dev-inspector compiler error', error);
    return source;
  }
};

const compiler = require('@vue/compiler-dom');

function transform(
  ast,
  nodeList,
  options = {
    entry: (node, nodeList) => {},
    out: (node, nodeList) => {},
  }
) {
  const _traverse = (ast, options) => {
    options.entry && options.entry(ast, nodeList);

    ast.children &&
      ast.children.map((node) => {
        _traverse(node, options);
      });

    options.out && options.out(ast, nodeList);
  };
  _traverse(ast, options);
}

function generator(nodeList, source) {
  let code = '';
  // 如果 vue 文件中自定义块，必须写针对自定义块的 rule，否则 vue-loader 会报错，具体看
  // https://theydy.github.io/notebook/vue/other.html#vue-loader-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9D%97
  let start = 0;

  for (let i = 0; i < nodeList.length; i++) {
    const node = nodeList[i];
    code += source.slice(start, node.insertIndex);
    code += node.desc;

    if (i === nodeList.length - 1) {
      code += source.slice(node.insertIndex);
    } else {
      start = node.insertIndex;
    }
  }

  return code;
}

function vueDevInspectorLoader(source, relativePath) {
  const ast = compiler.parse(source);

  const template = ast.children.find((node) => node.tag === 'template');

  // 如果没有 template 直接返回
  if (!template) return source;

  const nodeList = [];
  transform(template, nodeList, {
    entry: (node, nodeList) => {
      if (!node.tag) return;

      const nodeStart = node.loc.start.offset;
      const hasProps = node.props && node.props.length;

      const insertIndex = !hasProps
        ? nodeStart + node.tag.length + 1
        : node.props[node.props.length - 1].loc.end.offset;

      const target = {
        insertIndex,
        desc: ` data-inspector-line="${node.loc.start.line}" data-inspector-column="${node.loc.start.column}" data-inspector-relative-path="${relativePath}"`,
      };

      nodeList.push(target);
    },
  });

  let code = generator(nodeList, source);
  return code;
}

module.exports = vueDevInspectorLoader;

  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 /* asRootData */);
    }
    if (opts.computed) { initComputed(vm, opts.computed); }
    if (opts.watch && opts.watch !== nativeWatch) {
      initWatch(vm, opts.watch);
    }
  }

    var props = vm._props = {};
    var loop = function ( key ) {
      keys.push(key);
      var value = validateProp(key, propsOptions, propsData, vm);
   
      {
        
        defineReactive(props, key, value, function () {
          // ...
        });
      }

      if (!(key in vm)) {
        proxy(vm, "_props", key);
      }
    };

    for (var key in propsOptions) loop( key );

    var data = vm.$options.data;
    data = vm._data = typeof data === 'function'
      ? getData(data, vm)
      : data || {};

    var keys = Object.keys(data);
    var i = keys.length;

    while (i--) {
      var key = keys[i];
      // ...
      proxy(vm, "_data", key);
    }
    // observe data
    observe(data, true /* asRootData */);

  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
  }

  function defineReactive (
    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;
        /* eslint-disable no-self-compare */
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        /* eslint-enable no-self-compare */
        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();
      }
    });
  }

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

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

  Observer.prototype.observeArray = function observeArray (items) {
    for (var i = 0, l = items.length; i < l; i++) {
      observe(items[i]);
    }
  };

  function protoAugment (target, src) {
    target.__proto__ = src;
  }

  function copyAugment (target, src, keys) {
    for (var i = 0, l = keys.length; i < l; i++) {
      var key = keys[i];
      def(target, key, src[key]);
    }
  }

  var Dep = function Dep () {
    this.id = uid++;
    this.subs = [];
  };

  Dep.target = null; // 这是一个 Watcher 对象

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

  Dep.prototype.removeSub = function removeSub (sub) {
    remove(this.subs, sub);
  };

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

  Dep.prototype.notify = function notify () {
    var subs = this.subs.slice();
    if (!config.async) {
      subs.sort(function (a, b) { return a.id - b.id; });
    }
    for (var i = 0, l = subs.length; i < l; i++) {
      subs[i].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; // for lazy watchers
    this.deps = [];
    this.newDeps = [];
    this.depIds = new _Set();
    this.newDepIds = new _Set();
    this.expression = expOrFn.toString();
    // parse expression for 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();
  };

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

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

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

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

  Watcher.prototype.depend = function depend () {
    var i = this.deps.length;
    while (i--) {
      this.deps[i].depend();
    }
  };

  // ...省略 evaluate、cleanupDeps 和 teardown 的代码

    
    var updateComponent = function () {
      vm._update(vm._render(), hydrating);
    };

    new Watcher(vm, updateComponent, noop, {
      before: function before () {
        if (vm._isMounted && !vm._isDestroyed) {
          callHook(vm, 'beforeUpdate');
        }
      }
    }, true /* isRenderWatcher */);

  var Watcher = function Watcher (
    vm, // vm
    expOrFn, // updateComponent
    cb, // noop
    options, // { before }
    isRenderWatcher // true
  ) {
    this.vm = vm;
    // ... 
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn;
    }
    // ...
    this.value = this.get();
  };

  Watcher.prototype.get = function get () {
    pushTarget(this);
    var value;
    var vm = this.vm;
    try {
      value = this.getter.call(vm, vm);
    } catch (e) {
      // ...
    } finally {
      // ...
      popTarget();
    }
    return value
  };

  Watcher.prototype.update = function update () {
    // ...
    queueWatcher(this); // 在 nextTick 中遍历需要更新的 watcher 执行 watcher.run()
  };

  Watcher.prototype.run = function run () {
    if (this.active) {
      var value = this.get();
      // ...
    }
  };

const Promise = (function () {

  function MyPromise(fn) {
    const self = this;
    self.state = 'pending';
    self.value = undefined;
    self.callbacks = [];

    function resolve(value) {
      setTimeout(() => {
        if (self.state === 'pending') {
          self.state = 'resolved';
          self.value = value;
          self.callbacks.map(cb => {
            cb.onResolved(value);
          });
        }
      }, 0);
    }

    function reject(value) {
      setTimeout(() => {
        if (self.state === 'pending') {
          self.state = 'rejected';
          self.value = value;
          self.callbacks.map(cb => {
            cb.onRejected(value);
          });
        }
      }, 0);
    }

    try {
      fn(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  
  const resolvePromise = function (promise, x, resolve, reject) {
    let called = false;
    let then;

    /**
     * 检测循环引用
     */
    if (promise === x) {
      return reject(new TypeError('Error'));
    }

    if (x instanceof MyPromise) {
      return x.then(y => {
        resolvePromise(promise, y, resolve, reject);
      }, reject);
    }

    if (
      /**
       * x !== null 不能省略，因为 `typeof null` 输出的是 "object"，所以要排除 null。
       */
      (x !== null) &&
      (
        (typeof x === 'object') ||
        (typeof x === 'function')
      )
    ) {
      try {
        then = x.then;
        if (typeof then === 'function') {
          then.call(x,
          y => {
            if (called) return;
            called = true;
            resolvePromise(promise, y, resolve, reject);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          });
        } else {
          resolve(x);
        }
      } catch (e) {
        if (called) return
        called = true;
        reject(e);
      }
    } else {
      resolve(x);
    }
  }

  MyPromise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    let promise2;

    /**
     * onResolved 和 onRejected 的默认值处理数据传递的问题
     */
    onResolved = typeof onResolved === 'function' ? onResolved : v => v;
    onRejected = typeof onRejected === 'function' ? onRejected : r => { throw r };

    if (self.state === 'pending') {
      return (promise2 = new MyPromise((resolve, reject) => {
        self.callbacks.push({
          onResolved: () => {
            try {
              const x = onResolved(self.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          },
          onRejected: () => {
            try {
              const x = onRejected(self.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }
        });
      }))
    }

    if (self.state === 'resolved') {
      /**
       * 为了能够链式调用promise，所以then 方法最后要返回一个新promise。
       * new promise 时传的函数立即执行。然后调用resolve 或 reject 改变状态成 resolved 或 rejected。
       * 所以要注意的是在这个promise 的同步代码中根据情况调用 resolve 或 reject，
       * 正确的改变这个promise 的状态。
       */
      return (promise2 = new MyPromise((resolve, reject) => {
        setTimeout(() => {
          try {
            const x = onResolved(self.value);
            resolvePromise(promise2, x, resolve, reject);
            /**
             * 如上面所说，新promise 中的同步代码的作用就是执行 上一个promise 的onResolved 或onRejected ，
             * 并根据返回的结果，正确的改变新promise 的状态。
             * 所以resolvePromise 这个函数就是先判断了一大堆情况，最后执行了 resolve(value) 或 reject(value)。
             * 把这个新promise 的状态给改变了。
             */
          } catch (e) {
            reject(e);
          }
        }, 0);
      }));
    }

    if (self.state === 'rejected') {
      return (promise2 = new MyPromise((resolve, reject) => {
        setTimeout(() => {
          try {
            const x = onRejected(self.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }));
    }
  }

  MyPromise.prototype.catch = function (onRejected) {
    return this.then(null, onRejected);
  }
  
  MyPromise.prototype.finally = function (fn) {
    return this.then(fn, fn);
  }
  
  MyPromise.all = function (promises) {
    return new MyPromise((resolve, reject) => {
      let count = 0;
      let nums = promises.length;
      let values = new Array(nums);
  
      for (let i = 0; i < nums; i++) {
        Promise.resolve(promises[i]).then(value => {
          count++;
          values[i] = value;
          if (count === nums) {
            return resolve(values);
          }
        }, r => {
          return reject(r);
        })
      }
    })
  }
  
  MyPromise.race = function (promises) {
    return new MyPromise((resolve, reject) => {
      let nums = promises.length;
      for (let i = 0; i < nums; i++) {
        MyPromise.resolve(promises[i]).then(value => {
          return resolve(value);
        }, r => {
          return reject(r);
        })
      }
    })
  }
  
  MyPromise.resolve = function (value) {
    let promise = new MyPromise((resolve, reject) => {
      resolvePromise(promise, value, resolve, reject)
    })
    return promise;
  }
  
  MyPromise.reject = function (value) {
    let promise = new MyPromise((resolve, reject) => {
      reject(value);
    })
    return promise;
  }  
  
  // 使用 promises-aplus-tests 测试
  MyPromise.deferred = MyPromise.defer = function () {
    var dfd = {};
    dfd.promise = new MyPromise(function (resolve, reject) {
      dfd.resolve = resolve;
      dfd.reject = reject;
    })
    return dfd;
  }

  try {
    module.exports = MyPromise;
  } catch (e) { }
  // 使用 promises-aplus-tests 测试 end

  return MyPromise;
})();

// src/core/instance/lifecycle.js

export function mountComponent(vm, el, hydrating){
  //...
  updateComponent = () => {
    vm._update(vm._render(), hydrating)
  }

  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

  //...
}

updateComponent = () => {
  vm._update(vm._render(), hydrating)
}

// src/core/instance/lifecycle.js
Vue.prototype._update = function (vnode, hydrating) {
  //...
  if (!prevVnode) {
    // initial render
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  } else {
    // updates
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
  //...
}

function patch(oldVnode, vnode, hydrating, removeOnly) {
  //...
  if (isUndef(oldVnode)) {
    // empty mount (likely as component), create new root element
    isInitialPatch = true
    createElm(vnode, insertedVnodeQueue)
  } else {
    const isRealElement = isDef(oldVnode.nodeType)
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // patch existing root node
      patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
    } else {
      if (isRealElement) {
        // mounting to a real element
        // check if this is server-rendered content and if we can perform
        // a successful hydration.
        if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
          oldVnode.removeAttribute(SSR_ATTR)
          hydrating = true
        }

        // either not server-rendered, or hydration failed.
        // create an empty node and replace it
        oldVnode = emptyNodeAt(oldVnode)
      }
      // replacing existing element
      const oldElm = oldVnode.elm
      const parentElm = nodeOps.parentNode(oldElm)

      // create new node
      createElm(
        vnode,
        insertedVnodeQueue,
        // extremely rare edge case: do not insert if old element is in a
        // leaving transition. Only happens when combining transition +
        // keep-alive + HOCs. (#4590)
        oldElm._leaveCb ? null : parentElm,
        nodeOps.nextSibling(oldElm)
      )

      // update parent placeholder node element, recursively
      if (isDef(vnode.parent)) {
        let ancestor = vnode.parent
        const patchable = isPatchable(vnode)
        while (ancestor) {
          for (let i = 0; i < cbs.destroy.length; ++i) {
            cbs.destroy[i](ancestor)
          }
          ancestor.elm = vnode.elm
          if (patchable) {
            for (let i = 0; i < cbs.create.length; ++i) {
              cbs.create[i](emptyNode, ancestor)
            }
            // #6513
            // invoke insert hooks that may have been merged by create hooks.
            // e.g. for directives that uses the "inserted" hook.
            const insert = ancestor.data.hook.insert
            if (insert.merged) {
              // start at index 1 to avoid re-invoking component mounted hook
              for (let i = 1; i < insert.fns.length; i++) {
                insert.fns[i]()
              }
            }
          } else {
            registerRef(ancestor)
          }
          ancestor = ancestor.parent
        }
      }

      // destroy old node
      if (isDef(parentElm)) {
        removeVnodes(parentElm, [oldVnode], 0, 0)
      } else if (isDef(oldVnode.tag)) {
        invokeDestroyHook(oldVnode)
      }
    }
  }
  //...
}

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

// src/core/vdom/patch.js
function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  if (oldVnode === vnode) {
    return
  }

  const elm = vnode.elm = oldVnode.elm

  if (isTrue(oldVnode.isAsyncPlaceholder)) {
    if (isDef(vnode.asyncFactory.resolved)) {
      hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
    } else {
      vnode.isAsyncPlaceholder = true
    }
    return
  }

  // reuse element for static trees.
  // note we only do this if the vnode is cloned -
  // if the new node is not cloned it means the render functions have been
  // reset by the hot-reload-api and we need to do a proper re-render.
  if (isTrue(vnode.isStatic) &&
    isTrue(oldVnode.isStatic) &&
    vnode.key === oldVnode.key &&
    (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  ) {
    vnode.componentInstance = oldVnode.componentInstance
    return
  }

  let i
  const data = vnode.data
  if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    i(oldVnode, vnode)
  }

  const oldCh = oldVnode.children
  const ch = vnode.children

  if (isDef(data) && isPatchable(vnode)) {
    for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
    if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  }
  if (isUndef(vnode.text)) {
    if (isDef(oldCh) && isDef(ch)) {
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {
      removeVnodes(elm, oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    nodeOps.setTextContent(elm, vnode.text)
  }
  if (isDef(data)) {
    if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  }
}

// src/core/vdom/patch.js
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm

  // removeOnly is a special flag used only by <transition-group>
  // to ensure removed elements stay in correct relative positions
  // during leaving transitions
  const canMove = !removeOnly

  if (process.env.NODE_ENV !== 'production') {
    checkDuplicateKeys(newCh)
  }

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) { // New element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // same key but different element. treat as new element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
  if (oldStartIdx > oldEndIdx) {
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) {
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  }
}

{
    render: function render () {
      var slot = this.$slots.default;
      /**
       * getFirstComponentChild 找到第一个组件节点
       */
      var vnode = getFirstComponentChild(slot);
      var componentOptions = vnode && vnode.componentOptions;
      if (componentOptions) {
        // check pattern
        var name = getComponentName(componentOptions);
        var ref = this;
        var include = ref.include;
        var exclude = ref.exclude;

        /**
         * 不匹配直接返回 vnode
         */
        if (
          // not included
          (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;

        /**
         * 优先使用 key 属性做为缓存的 keys，否则使用 cid + tag 拼接做为 keys
         */
        var key = vnode.key == null
          // same constructor may get registered as different local components
          // so cid alone is not enough (#3269)
          ? componentOptions.Ctor.cid + (componentOptions.tag ? ("::" + (componentOptions.tag)) : '')
          : vnode.key;

        
        if (cache[key]) {
          /**
           * 命中缓存，直接将缓存的 vnode 上的 instance 赋给新 vnode
           * 接着更新当前组件的调用顺序
           */
          vnode.componentInstance = cache[key].componentInstance;
          // make current key freshest
          remove(keys, key);
          keys.push(key);
        } else {
          /**
           * 没有命中缓存，缓存 vnode
           * LRU 最近最少使用 根据 max 更新缓存 map
           */
          cache[key] = vnode;
          keys.push(key);
          // prune oldest entry
          if (this.max && keys.length > parseInt(this.max)) {
            pruneCacheEntry(cache, keys[0], keys, this._vnode);
          }
        }

        /**
         * 打上 keepAlive 标记
         * 在 prepatch 钩子中用到
         */
        vnode.data.keepAlive = true;
      }

      /**
       * keep-alive 最后无论是否命中缓存都需要返回 vnode。
       * 区别在于 vnode 上的 componentInstance 和 keepAlive 属性。
       * 初次渲染只有 keepAlive 属性
       * 重新渲染则 componentInstance 和 keepAlive 都存在。
       */
      return vnode || (slot && slot[0])
    }
}