Vue源码逐行解读

文章目录

1. 前言

前言

由于直接在 vue 文件夹中跳来跳去会非常混乱，要去各个文件一层层中找到想要的函数，不方便查找，就逐行看下来了，不过这样跳来跳去可以比较清楚地了解 Vue 的运行流程，各有利弊吧。

目前只看了这些，进度缓慢。主要是这样的看源码方式，虽然知道定义了这个函数，但并不清楚它到底会用在哪个地方，为了理解，往往还是会直接跳到调用这个函数的地方。

/*!
 * Vue.js v2.6.11
 * (c) 2014-2019 Evan You
 * Released under the MIT License.
 */

// init
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global = global || self, global.Vue = factory());
  }(this, function () { 'use strict';
    /*  if (typeof exports === 'object' && typeof module !== 'undefined') {  // 检查 CommonJS  即 CJS
            module.exports = factory()
        } else {
            if (typeof define === 'function' && define.amd) { // AMD 异步模块定义 检查 JavaScript 管理库 require.js 的存在  即检查 AJS, 这两种检查都是 JS 的模块化管理 (在 ES6 的 import 和 export 出现之前已经非常流行)
                define(factory)
            } else {
                global = global || self
                global.Vue = factory()
            }
        }
        从一个 ( 开始的 (第8行)一整个立即执行函数, 相当于 Window.Vue = factory()
        factory() 是从第 12 行开始的匿名函数(this, 之后的这个), 该匿名函数没有自执行, 设计参数 Window, 并传入 Window 对象, 不污染全局环境, 也不会被别的代码污染
    */
    /* 核心代码开始 */
  
    // 冻结 {} 这个空对象并赋值给 emptyObject, 这个对象上无法进行修改与添加
    var emptyObject = Object.freeze({});
    
    // These helpers produce better VM code in JS engines due to their
    // explicitness and function inlining.
    
    // 工具代码，方便之后的代码的语义化，看到函数名直接知道这个函数做了什么，而不再是根据 === 来判断函数到底在干什么
    
    /* 判断是否为 undefined */
    function isUndef (v) {
      return v === undefined || v === null
    }
    /* 判断是否已被赋值 */
    function isDef (v) {
      return v !== undefined && v !== null
    }
    /* 判断是否为 true */
    function isTrue (v) {
      return v === true
    }
    /* 判断是否为 false */
    function isFalse (v) {
      return v === false
    }
  
    /**
     * Check if value is primitive.
     */
    /* 判断是否为原始类型
   JS 中有 string, number, symbol, boolean 四种原始类型 */
    function isPrimitive (value) {
      return (
        typeof value === 'string' ||
        typeof value === 'number' ||
        // $flow-disable-line
        typeof value === 'symbol' ||
        typeof value === 'boolean'
      )
    }
  
    /**
     * Quick object check - this is primarily used to tell
     * Objects from primitive values when we know the value
     * is a JSON-compliant type.
     */
    /* 判断对象是否有值, null 将返回 false */
    function isObject (obj) {
      return obj !== null && typeof obj === 'object'
    }
  
    /**
     * Get the raw type string of a value, e.g., [object Object].
     */
    /* 判断值的类型, 我们一般用的都是 Object.prototype.toString.call(value), 把这个方法给 _toString */
    var _toString = Object.prototype.toString;
    /* 切割 _toString 的返回值, 如 [object String] 提取出 String 并返回 */
    function toRawType (value) {
      return _toString.call(value).slice(8, -1)
    }
  
    /**
     * Strict object type check. Only returns true
     * for plain JavaScript objects.
     */
    /* 判断是否为普通对象, 因为 JS 中一切都可以被当作对象, 数字是 Number 对象, 字符串是 String 对象, 这个函数判断是否为纯粹的 Object 对象, 这种对象通过 {} (即字面量创建) 或 new Object() 或 Object.create(null) 创建, Object.create(null), 以 null 为原型创建对象 */
    function isPlainObject (obj) {
      return _toString.call(obj) === '[object Object]'
    }
    /* 判断是否为正则对象 RegExp 原生引用类型 */
    function isRegExp (v) {
      return _toString.call(v) === '[object RegExp]'
    }
  
    /**
     * Check if val is a valid array index.
     */
    /* 判断 val 是否为有效的数组索引, 必须为正数, 非无穷, 而且为整数, 连起来就是 非无穷的正整数 */
    function isValidArrayIndex (val) {
      var n = parseFloat(String(val));
      return n >= 0 && Math.floor(n) === n && isFinite(val)
    }
  
    /* 判断是否为 Promise 对象, 先判断 val 是否被赋值, 再看看 val 上是否有 then 和 catch 方法 */
    function isPromise (val) {
      return (
        isDef(val) &&
        typeof val.then === 'function' &&
        typeof val.catch === 'function'
      )
    }
  
    /**
     * Convert a value to a string that is actually rendered.
     */
    /* 自定义了一个 toString 方法, 先判断是否为 空值, 如果不是, 判断是否为数组或是纯粹对象, 如果是就调用 JSON.stringify 来转换为字符串, 否则就直接 String() 转换为字符串, 如 字符串、数值、函数等, 都会把自己的内容直接打印出来, 不需要做转换 
    JSON.stringify(val, null, 2) , 第二个参数如果是函数, 则每个 val 的每个属性都会经过该函数的转化和处理, 如果第二个参数是数组, 只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中, 如果第二个参数为 null 或未提供, 则 val 的全部属性都被序列化,
    第三个参数指定缩进用的空格, 默认为 0, 上限为 10, 也可以传入字符串, 将会把字符串的长度作为值
    例如: JSON.stringify([123], null, 0) 转换后
    [123]
    JSON.stringify([123], null, 1) 转换后
    [
     123
    ] 
    JSON.stringify([123], null, 2) 转换后 
    [
      123
    ]
    只要不为 0, 默认前后加上换行符
    MDN 地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
    */
    function toString (val) {
      return val == null
        ? ''
        : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
          ? JSON.stringify(val, null, 2)
          : String(val)
    }
  
    /**
     * Convert an input value to a number for persistence.
     * If the conversion fails, return original string.
     */
    /* 转换成 Number, 先转换成浮点数, 判断一下是否为NaN, 是就返回 NaN, 否则返回转换后的数值, 感觉好像 return 的这个判断没有什么意义。。直接 return n 好像效果一致
    本身的注释好像写了，如果转换失败，返回原始值, 但这个什么时候才会转换失败啊。感觉除了 NaN 和数值就不会有别的值了。
    不过还是写一下, 注意 isNaN(undefined) 是 true
     */
    function toNumber (val) {
      var n = parseFloat(val);
      return isNaN(n) ? val : n
    }
  
    /**
     * Make a map and return a function for checking if a key
     * is in that map.
     */
    /* 英文翻译是 制作一个映射并返回一个函数用于检测一个键是否在该映射中
    1.创建一个空对象
    2.把传入的要检测的键名(字符串类型)以 , 分割成数组
    3.循环这个数组并将其放入创建的空对象(映射)中, 并将其值设为 true
    4.判断是否传入了检测小写的要求, 如果要求小写, 则返回一个函数, 这个返回的函数会自动将传入的值变为小写, 再检测这个映射中是否有被传入的值同名的键(小写的), 如果不要求小写, 返回的函数就不会自动将传入的值变为小写
    5. 返回的函数被调用时, 如果 map 中有对应的键名, 就返回 true, 否则返回 undefined
    */
    function makeMap (
      str,
      expectsLowerCase
    ) {
      var map = Object.create(null);
      var list = str.split(',');
      for (var i = 0; i < list.length; i++) {
        map[list[i]] = true;
      }
      return expectsLowerCase
        ? function (val) { return map[val.toLowerCase()]; }
        : function (val) { return map[val]; }
    }
  
    /**
     * Check if a tag is a built-in tag.
     */
    /* 
        创建一个函数用于判断传入的标记是否为内置标签  到时候 config 中 isReservedTag 大概会用到
        isBuiltInTag(val) 返回值为 true 或 undefined, 这样调用时会返回这个 map 中是否有 val 这个键名 ? 应该是为了防止命名冲突, 现在这个 map 中有 slot 和 component 两个键名
    */
    var isBuiltInTag = makeMap('slot,component', true);
  
    /**
     * Check if an attribute is a reserved attribute.
     */
    /* 创建一个函数用于判断传入的属性是否为保留属性
        isReservedAttribute(val) 返回值为 true 或 undefined, 这样调用时会返回这个 map 中是否有 val 这个键名, 同上, 应该也是为了方式命名冲突, 现在这个 map 中有 key, ref, slot, slot-scope, is 五个键名
     */
    var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is');
  
    /**
     * Remove an item from an array.
     */
    /* 移除数组中的某项, 先判断如果数组有长度, 获取要删除项的索引, 如果该项存在于该数组中, 用 splice 删掉它 */
    function remove (arr, item) {
      if (arr.length) {
        var index = arr.indexOf(item);
        if (index > -1) {
          return arr.splice(index, 1)
        }
      }
    }
  
    /**
     * Check whether an object has the property.
     */
    /* 自定义了 hasOwnProperty 方法, 和上面自定义的 toString 方法一样, 都是为了写起来更方便吧。。
    然后它们都是 调用了 Object.prototype 上的方法
     */
    var hasOwnProperty = Object.prototype.hasOwnProperty;
    /* 判断一个对象本身是否有这个属性, 如果有, 就返回 true, 如果没有, 就返回 false, 即使它的原型链上能找到这个属性 */
    function hasOwn (obj, key) {
      return hasOwnProperty.call(obj, key)
    }
  
    /**
     * Create a cached version of a pure function.
     */
    /*  柯里化 高级函数
        创建了一个用于创建函数的纯函数模板
        先创建一个空对象，用于保存之后要用到的函数
        返回一个函数, 同时闭包中保留 cache 作为缓存, 调用这个函数时, 如果被传入这个函数的值的名字在上面的空对象上定义了, 那么就返回这个空对象上的值, 如果没有, 把一开始传入的函数执行一次, 把返回值放到这个空对象上, 名字为传入的 str
        其实就是在 cache 对象上保存了一堆函数执行后的结果
    */
    function cached (fn) {
      var cache = Object.create(null);
      return (function cachedFn (str) {
        var hit = cache[str];
        return hit || (cache[str] = fn(str))
      })
    }
  
    /**
     * Camelize a hyphen-delimited string.
     */
    /* 传入的字符串如果有连字符 - , 把它删了并且改成驼峰命名, 内层匿名函数 return 的值将会替换 _ 匹配到的内容 */
    var camelizeRE = /-(\w)/g;
    var camelize = cached(function (str) {
      return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
    });
  
    /**
     * Capitalize a string.
     */
    /* 把字符串首字母变成大写 */
    var capitalize = cached(function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    });
  
    /**
     * Hyphenate a camelCase string.
     */
    /* \b 表示匹配单词之间的空白或者 - 之类的打断字符的位置，注意是位置，比如 'a b'.replace(/\b/g, '-') 返回的是 '-a- -b-', a的前后都不是字符，匹配成功, b的前后也都不是字符, 匹配成功
    而 \B 则表示匹配连着的两个字符的位置。如 /\B/.test('ab') 返回 true 
    那么下面的 /\B([A-Z])/g 意思就是匹配驼峰命名的位置，如 'myValue' 将会被匹配 y(V) ，于是接下来就会被替换成 '-$1' , $1 表示捕获组 1, 就是括号中的内容, 这里是 v 就会被替换成 'my-Value' 再转小写，变成 'my-value'，完成驼峰命名到 - 连接符的转换
    */
    var hyphenateRE = /\B([A-Z])/g;
    var hyphenate = cached(function (str) {
      return str.replace(hyphenateRE, '-$1').toLowerCase()
    });
  
    /**
     * Simple bind polyfill for environments that do not support it,
     * e.g., PhantomJS 1.x. Technically, we don't need this anymore
     * since native bind is now performant enough in most browsers.
     * But removing it would mean breaking code that was able to run in
     * PhantomJS 1.x, so this must be kept for backward compatibility.
     */
    /* 整个 polyfillBind 函数的作用是 bind 的兼容写法, 主要是为了一些没有原生 bind 的环境, 比如 PhantomJS 1.x, 这个环境不支持原生的 bind */
    /* istanbul ignore next */
    function polyfillBind (fn, ctx) {
          /* 高级函数, 用于绑定函数作用域, 作用同 bind, 闭包保存了被存入的作用域和要执行函数, 返回一个已经修改了作用域的函数 */
      function boundFn (a) {
        var l = arguments.length;
        return l
          ? l > 1
            ? fn.apply(ctx, arguments)
            : fn.call(ctx, a)
          : fn.call(ctx)
      }
  
      boundFn._length = fn.length;
      return boundFn
    }
    // 原生绑定
    function nativeBind (fn, ctx) {
      return fn.bind(ctx)
    }
    // bind 方法的兼容写法
    var bind = Function.prototype.bind
      ? nativeBind
      : polyfillBind;
  
    /**
     * Convert an Array-like object to a real Array.
     */
    /* 把类数组转换成真正的数组 */
    function toArray (list, start) {
      start = start || 0;
      var i = list.length - start;
      var ret = new Array(i);
      while (i--) {
        ret[i] = list[i + start];
      }
      return ret
    }
  
    /**
     * Mix properties into target object.
     */
    /* 
      将目标对象与另一个对象混合后返回新的目标对象
      另一个对象上的同名属性将会覆盖目标对象上的同名属性
      如果目标对象上不存在这个属性, 则添上
    */
    function extend (to, _from) {
      for (var key in _from) {
        to[key] = _from[key];
      }
      return to
    }
  
    /**
     * Merge an Array of Objects into a single Object.
     */
    /* 
      把数组里每个对象的属性都合并到同一个对象中
      如 [{ a: 1 },{ b: 2 }] => { a: 1, b: 2}
     */
    function toObject (arr) {
      var res = {};
      for (var i = 0; i < arr.length; i++) {
        if (arr[i]) {
          extend(res, arr[i]);
        }
      }
      return res
    }
  
    /* eslint-disable no-unused-vars */

    /**
     * Perform no operation.
     * Stubbing args to make Flow happy without leaving useless transpiled code
     * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).
     */
    /* 空函数 在这里插入的参数，是为了避免 Flow 使用 rest 操作符(…) 产生无用的转换代码。*/
    function noop (a, b, c) {}
  
    /**
     * Always return false.
     */
    /* 返回 false */
    var no = function (a, b, c) { return false; };
  
    /* eslint-enable no-unused-vars */
  
    /**
     * Return the same value.
     */
    /* 返回自身 */
    var identity = function (_) { return _; };
  
    /**
     * Generate a string containing static keys from compiler modules.
     */
    /* 
      字面作用是把传入的 modules 中的静态属性拼接成 ',' 分隔的字符串
      实际作用是从编译器模块生成包含静态键的字符串
    */
    function genStaticKeys (modules) {
      return modules.reduce(function (keys, m) {
        return keys.concat(m.staticKeys || [])
      }, []).join(',')
    }
  
    /**
     * Check if two values are loosely equal - that is,
     * if they are plain objects, do they have the same shape?
     */
    /*
      这个函数判断 a 和 b 是否相等, 译为浅相等 ?
      当 a 、 b 都为对象时, 判断是否为数组, 如果是数组, 判断长度是否相等, 如果相等, 判断两个数组的每项是否都全等(递归), 全等就返回 true 否则 false. 
      当 a 、 b 都为对象而非数组时, 如果它们都是 Date 类型, 调用 getTime() 比较时间戳是否相等,相等返回 true
      当 a 、 b 都为对象而非数组时, 且它们不是 Date 类型, 获取它们的 keys(以它们的键名组成的数组), 判断它们的键名是否一样多, 一样多就逐项比较相等(递归), 当然比较的时候 a 、 b 中的键名必须相同且键值相等才会让这一项返回 true 之后才继续下一项, 最后都返回 true 才返回 true, 否则 false
      当 a 、 b 都不为对象时, 把它们转为字符串比较, 全等就 true, 否则 false
      如果 a 、 b 一个是对象 一个不是对象, 直接 false

      istanbul 是个计算代码覆盖率的工具
      /* istanbul ignore next *(不加点东西注释就失效了, 就这样写吧)/ 是 istanbul 提供的注释语法，允许它之后的代码不计入覆盖率。
    */
    function looseEqual (a, b) {
      if (a === b) { return true }
      var isObjectA = isObject(a);
      var isObjectB = isObject(b);
      if (isObjectA && isObjectB) {
        try {
          var isArrayA = Array.isArray(a);
          var isArrayB = Array.isArray(b);
          if (isArrayA && isArrayB) {
            return a.length === b.length && a.every(function (e, i) {
              return looseEqual(e, b[i])
            })
          } else if (a instanceof Date && b instanceof Date) {
            return a.getTime() === b.getTime()
          } else if (!isArrayA && !isArrayB) {
            var keysA = Object.keys(a);
            var keysB = Object.keys(b);
            return keysA.length === keysB.length && keysA.every(function (key) {
              return looseEqual(a[key], b[key])
            })
          } else {
            /* istanbul ignore next */
            return false
          }
        } catch (e) {
          /* istanbul ignore next */
          return false
        }
      } else if (!isObjectA && !isObjectB) {
        return String(a) === String(b)
      } else {
        return false
      }
    }
  
    /**
     * Return the first index at which a loosely equal value can be
     * found in the array (if value is a plain object, the array must
     * contain an object of the same shape), or -1 if it is not present.
     */
    /* 
      判断数组中是否有某项和 val 相等, 它们可以是对象、数组等复杂类型, 也可以是字符串、数值等基础类型
      如果有数组中能找到和 val 相等项, 返回该项索引, 否则返回 -1
    */
    function looseIndexOf (arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (looseEqual(arr[i], val)) { return i }
      }
      return -1
    }
  
    /**
     * Ensure a function is called only once.
     */
    /*
      通过闭包使传入的函数一旦被调用就无法再次被调用, 即只能调用一次
    */
    function once (fn) {
      var called = false;
      return function () {
        if (!called) {
          called = true;
          fn.apply(this, arguments);
        }
      }
    }
    /* 服务端渲染 */
    var SSR_ATTR = 'data-server-rendered';
    
    /* 
      直译 有用的类型? 数组里包含 组件、指令、过滤器
      里面三个都是全局函数名
     */
    var ASSET_TYPES = [
      'component',
      'directive',
      'filter'
    ];
    /* 
    生命周期的钩子, 官网给出八个常用钩子, 实际上这里有十二个
    activated 和 deactivated 是配合keep-alive 使用的两个钩子, 有点类似 beforeDestroy 和 destroyed, 但如果我们需要一个实例(比如路由跳转时, 不用的组件会被销毁)销毁后再次出现的话, 用 beforeDestroy 和 destroyed 太浪费性能了。它们用于重复激活一个实例时。
    errorCaptured 2.5 版本新增的, 处理异常的钩子函数
    serverPrefetch 在 vue-v2.6 的版本中, 处理 ssr (服务端)的函数
     */ 
    var LIFECYCLE_HOOKS = [
      'beforeCreate',
      'created',
      'beforeMount',
      'mounted',
      'beforeUpdate',
      'updated',
      'beforeDestroy',
      'destroyed',
      'activated',
      'deactivated',
      'errorCaptured',
      'serverPrefetch'
    ];
  
    /*  */
  
  
    /* 全局配置 */
    var config = ({
      /**
       * Option merge strategies (used in core/util/options)
       */
      /* 自定义合并策略的选项, 关于 $flow-disable-line 见下方 */
      // $flow-disable-line
      optionMergeStrategies: Object.create(null),
  
      /**
       * Whether to suppress warnings.
       */
      /* 是否关闭警告, 默认不关闭, 如果为 true, 将不会有各种报错信息 */
      silent: false,
  
      /**
       * Show production mode tip message on boot?
       */
      /* 
        开发模式下是否在控制台显示生产提示，即是否打印一条 You are running Vue in development mode. 设置为 false 即可关闭该提示。
       */
      productionTip: "development" !== 'production',
  
      /**
       * Whether to enable devtools
       */
      /* 是否允许 vue-devtools 检查代码. 浏览器环境下为true */
      devtools: "development" !== 'production',
  
      /**
       * Whether to record perf
       */
      /* 
        是否开启性能追踪，只有在开发模式和支持 performance.mark API 的浏览器上才有效
        设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。
       */
      performance: false,
  
      /**
       * Error handler for watcher errors
       */
      /* 
        指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例 用法
        Vue.config.errorHandler = function (err, vm, info) {
          // handle error
          // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
          // 只在 2.2.0+ 可用
        }
        从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是 undefined 时，被捕获的错误会通过 console.error 输出而避免应用崩溃。
        从 2.4.0 起，这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了。
        从 2.6.0 起，这个钩子也会捕获 v-on DOM 监听器内部抛出的错误。另外，如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数)，则来自其 Promise 链的错误也会被处理。
        错误追踪服务 Sentry 和 Bugsnag 都通过此选项提供了官方支持。
       */
      errorHandler: null,
  
      /**
       * Warn handler for watcher warns
       */
      /* 
        给 Vue 运行时的警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。 用法
        Vue.config.warnHandler = function (msg, vm, trace) {
          // `trace` 是组件的继承关系追踪
        }
       */
      warnHandler: null,
  
      /**
       * Ignore certain custom elements
       */
      /* 
        忽略某些自定义元素 用法
        Vue.config.ignoredElements = [
          'my-custom-web-component',
          'another-web-component',
          // 用一个 `RegExp` 忽略所有“ion-”开头的元素
          // 仅在 2.5+ 支持
          /^ion-/
        ]
        须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs, 它是一套不同的技术, 和 Vue 使用很像, 也是组件化, MDN https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。
       */
      ignoredElements: [],
  
      /**
       * Custom user key aliases for v-on
       */
      /* 
        $flow-disable-line
        $flow-disable-line 表示它在下一行禁用了 Flow JS 的错误报告, 在 .flowconfig 中的 option 里有写到 suppress_comment= \\(.\\|\n\\)*\\$flow-disable-line, 它会被后端语言 编译(大概吧, 因为这不是前端的写法, tmd 我觉得 $ 前面得加4个 '\' 才对), 而后端语言的正则里 \\\\ 表示一个 \, 比前端多了一层, 所以这里也一样每个比前端正则多写一层。。
        以 java 为例, \\ 中的第一个\表示 java 的转义字符\由编译器解析，第二个\是正则表达式\由正则表达式引擎解析。
        如果是 JS, 正则就应该写成 new RegExp('\(.\|\n\)*\\$flow-disable-line')
        字符串里只有一个 \ 就和没有没啥区别所以还能删一点,
        new RegExp('(.|\n)*\\$flow-disable-line')
        字符串会先把 \\$ 变成 \$ 然后传到正则中, 这样$ 就不是特殊字符了。
        接着把转义符去了, 表示匹配 /(.|\n)*$flow-disable-line/ 注意 . 号表示匹配换行符 \n 之外的任何单字符
        在线查看 vue 的 .flowconfig 文件地址 https://github.com/vuejs/vue/blob/dev/.flowconfig#L23
        然后 .flowconfig 官网配置网址 https://flow.org/en/docs/config/options/ 中, 会发现在v0.127.0版本中，删除了指定禁止注释语法的选项。$FlowFixMe，$FlowIssue，$FlowExpectedError，和 $FlowIgnore 成为唯一禁止注释的标准。也就是说新版的 FlowJS 中, 下面这注释没啥用了
       */
      /* 
        给 v-on 自定义键位别名 用法
        Vue.config.keyCodes = {
          v: 86,
          f1: 112,
          // camelCase(驼峰写法) 不可用
          mediaPlayPause: 179,
          // 取而代之的是 kebab-case 且用双引号括起来
          "media-play-pause": 179,
          up: [38, 87]
        }
        <input type="text" @keyup.media-play-pause="method">
       */
      // $flow-disable-line
      keyCodes: Object.create(null),
  
      /**
       * Check if a tag is reserved so that it cannot be registered as a
       * component. This is platform-dependent and may be overwritten.
       */
      /* 
        翻译 检查标签是否已保留，如果有，便不能将其注册为组件。这与平台有关，可能会被覆盖
        现在是值为 no 函数, 到下面它会变成别的, 应该会用到上面的 makeMap 变成 Map, 然后里面有下面这些默认的标签名和用户自定义的标签名
        规定的是一些 html 和 svg 它们下面的一些标签名，我们不能定义为组件名。比如 div html 这些
       */
      isReservedTag: no,
  
      /**
       * Check if an attribute is reserved so that it cannot be used as a component
       * prop. This is platform-dependent and may be overwritten.
       */
      /* 
        检查属性是否已保留，以便不能用作组件属性。这与平台有关，可能会被覆盖。
        现在是值为 no 函数, 到下面它会变成别的, 应该会用到上面的 makeMap 变成 Map, 然后里面有下面这些默认的属性名和用户自定义的属性名
        规定的是标签下的一些默认属性名，我们不能定义为属性名。比如 style class 这些
       */
      isReservedAttr: no,
  
      /**
       * Check if a tag is an unknown element.
       * Platform-dependent.
       */
      // 检查标签是否为未知元素。平台相关
      isUnknownElement: no,
  
      /**
       * Get the namespace of an element
       */
      // 获取元素的名称空间
      getTagNamespace: noop,
  
      /**
       * Parse the real tag name for the specific platform.
       */
      // 解析特定平台的真实标签名称。
      parsePlatformTagName: identity,
  
      /**
       * Check if an attribute must be bound using property, e.g. value
       * Platform-dependent.
       */
      // 检查是否必须使用属性来绑定属性，例如 value
      mustUseProp: no,
  
      /**
       * Perform updates asynchronously. Intended to be used by Vue Test Utils
       * This will significantly reduce performance if set to false.
       */
      // 异步执行更新。打算由 Vue Test Utils 使用, 如果设置为false，这将大大降低性能。
      async: true,
  
      /**
       * Exposed for legacy reasons
       */
      // 由于遗留原因而暴露
      _lifecycleHooks: LIFECYCLE_HOOKS
    });
  
    /*  */
  
    /**
     * unicode letters used for parsing html tags, component names and property paths.
     * using https://www.w3.org/TR/html53/semantics-scripting.html#potentialcustomelementname
     * skipping \u10000-\uEFFFF due to it freezing up PhantomJS
     */
    /* 
      用于解析html标签，组件名称和属性路径的 unicode字母。 
      不懂, 为啥这正则这样写的, 这样写不就是只匹配自己么, 也就是只匹配 'a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD'
      没事了, 下面用到了 .source 属性, 会返回 / / 中间内容的字符串
    */
    var unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;
  
    /**
     * Check if a string starts with $ or _
     */
    /* 
      是否为内部定义属性
      Vue 中默认 $ 为只读属性, _ 为可读可写
      判断字符串是否以 $ 或者 _ 开头
      '/u0024' $
      '/u005F' _
     */
    function isReserved (str) {
      var c = (str + '').charCodeAt(0);
      return c === 0x24 || c === 0x5F
    }
  
    /**
     * Define a property.
     */
    /* 设置对象属性的描述对象, 这个属性可读可写可删可改, 是否可枚举需要自己传参, 默认不可枚举, 因为 !!undefined === false */
    // 在 Vue 中, 有很多互相引用的地方, 通过这个函数让新添加的对象变成不可枚举, 从而让递归可以结束, 如 __ob__
    function def (obj, key, val, enumerable) {
      Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configurable: true
      });
    }
  
    /**
     * Parse simple path.
     */
    /*
      作用是解析一个简单路径
      正则对象有 source 属性, 返回正则的字符串形式, 如 /a-z/.source 返回 'a-z'
      于是上面的正则就会变成下面这样并赋值给 bailRE
      /[^a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD.$_\d]/
      \d 匹配数字
      如果路径不是以上面的 a-zA-Z...这些合法字符开头的, 就直接返回, 如果是合法字符开头, 把地址以 . 分割成数组并存在闭包中, 之后返回一个函数, 这个函数接受一个对象, 如果它不为空, 就遍历之前分割路径完成的数组, 每次遍历, 把它赋值为它自身的, 与数组当前项同名的键的键值并返回, 本身传入的对象应该很深, 所以可以这样写, 如下所示, 对象先变成 a, 再变成 b, 再变成 c
      {
        a: {
          b: {
            c: {}
          }
        }
      }
    */
    var bailRE = new RegExp(("[^" + (unicodeRegExp.source) + ".$_\\d]"));
    function parsePath (path) {
      if (bailRE.test(path)) {
        return
      }
      var segments = path.split('.');
      return function (obj) {
        for (var i = 0; i < segments.length; i++) {
          if (!obj) { return }
          obj = obj[segments[i]];
        }
        return obj
      }
    }
  
    /*  */
  
    // can we use __proto__?
    /* 判断能否使用 __proto__ , 将会在改写数组响应式方法的时候决定是在它本身添加方法还是在其原型链上新添对象 */
    var hasProto = '__proto__' in {};
  
    // Browser environment sniffing
    /* 
      以下都是环境检测
      inBrowser 判断是否有 window
      inWeex 是否为 Weex 环境, 它可以用来开发移动应用
      weexPlatform 如果为 Weex 环境, 把 Weex 环境变量的 platform 转成小写并赋值
      UA 如果在浏览器环境下, 同时存在 navigator API, 就把这个浏览器代理信息赋值给 UA
      isIE 用 IE 标识和 UA 匹配一下看看是 IE 🐎
      isIE9 用 IE9 标识和 UA 匹配一下看看是 IE9 🐎
      isEdge 用 Edge 标识和 UA 匹配一下看看是 Edge 🐎
      isAndroid 用 android 标识和 UA 或者 weexPlatform 匹配一下看看是安卓 🐎
      isIOS 是 ios 🐎, 匹配方式同 安卓
      isChrome 判断是谷歌🐎 匹配 UA 同时得不是 Edge (因为 Edge 换了谷歌内核, 标识估计也丢进去了)
      isPhantomJS 是 PhantomJS 🐎 PhantomJS是一个无界面的、可脚本编程的WebKit浏览器引擎，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。
      isFF 是火狐 🐎

    */ 
    var inBrowser = typeof window !== 'undefined';
    var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
    var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
    var UA = inBrowser && window.navigator.userAgent.toLowerCase();
    var isIE = UA && /msie|trident/.test(UA);
    var isIE9 = UA && UA.indexOf('msie 9.0') > 0;
    var isEdge = UA && UA.indexOf('edge/') > 0;
    var isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');
    var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');
    var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
    var isPhantomJS = UA && /phantomjs/.test(UA);
    var isFF = UA && UA.match(/firefox\/(\d+)/);
  
    // Firefox has a "watch" function on Object.prototype...
    /* 
      火狐的对象上有个特殊的方法 watch, 看看当前浏览器有没有 watch 方法
      卧槽, 对象外面包一层括号就能用 . 了
      不然就会变成 {}['watch']
     */
    var nativeWatch = ({}).watch;
  
    /*
      检查是否支持 passive, 它是Chrome提出的一个新的浏览器特性：Web开发者通过一个新的属性passive来告诉浏览器，当前页面内注册的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件
      
      Passive Event Listeners特性是为了提高页面的滑动流畅度而设计的，页面滑动流畅度的提升，直接影响到用户对这个页面最直观的感受。这个不难理解，想象一下你想要滑动某个页面浏览内容，当你用鼠标滚轮或者用手指触摸屏幕上下滑动的时候，页面并没有按你的预期进行滚动，此时你内心往往会感觉到一丝不爽，甚至想放弃该页面。Facebook之前做了一项试验，他们将页面滑动的响应刷新率从60FPS降低到30FPS的时候，发现用户的参与度急速下降。

      简单用法
      document.addEventListener('mousewheel', handler, { passive: true })

      分别用了 async 函数和 while 循环分别充当 sleep 函数作为测试函数，测试在加与不加 passive 下的浏览器表现。 
        1.在不加passive的情况下，使用async函数不会阻塞浏览器的默认滚动行为。
        2.在不加passive的情况下，使用while循环函数会阻塞浏览器的默认滚动行为。
        3.在加passive的情况下，使用async函数表现没有变化。
        4.在加passive的情况下，使用while循环函数不会阻塞浏览器的默认滚动行为。
        5.在加passive的情况下，调用preventDefault函数会报错，滚动正常。
        结论：当监听滚动的函数可能影响滚动时，可以检测浏览器是否支持passive以优化浏览器表现。
    */
    var supportsPassive = false;
    if (inBrowser) {
      try {
        var opts = {};
        // defineProperty 的第三个参数外面包括号的原因是 FlowJS 当时检测类型无法通过, 因为它找不到 value 的值, 接着代码就因为报错卡住不执行了, 不过加了 () 之后为啥可以我也不知道看 FlowJS 代码才知道(可能是加了之后变成表达式而不是对象 FlowJS 就不会对它进行检查了), 下面那个 issue 中 gaperton 提出了这种解决方法, 这种办法能不报错, 让代码继续执行, 否则到这里就卡了, 这大概也是尤大在这里写了一个 try 的原因吧, 为了报错时代码继续执行下去
        Object.defineProperty(opts, 'passive', ({
          get: function get () {
            /* istanbul ignore next */
            supportsPassive = true;
          }
        })); // https://github.com/facebook/flow/issues/285
        /*
        当前 addEventListener 的第三个参数可选择的选项, 如果第三个参数不是对象, 而是布尔值, 默认为 capture 赋值
        capture 表示在上面阶段执行函数, 为 true 时, 在捕获阶段, 默认为 false, 在冒泡阶段
        passive 在上面已经说明了, 由于不知道 listener 是否会调用 preventDefault, 浏览器只能在执行完整个监听函数之后才能决定是否滚动页面, 从而造成卡顿, 即使你的回调函数不做任何操作(如 function () {}). passive 就是直接告诉浏览器这个函数是否会调用 preventDefault, 从而加速页面(因为大部分的滚动事件回调函数都不会用到 preventDefault, 但浏览器却必须监听, 导致性能变差) 实际效果见 http://cloud.video.taobao.com/play/u/1629222031/p/1/e/6/t/1/39477440.mp4
        once 表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。
        addEventListener(type, listener, {
            capture: false,
            passive: false,
            once: false
        })
        */
        window.addEventListener('test-passive', null, opts);
      } catch (e) {}
    }
  
    // this needs to be lazy-evaled because vue may be required before
    // vue-server-renderer can set VUE_ENV
    /* 
      检测 vue 是否为服务端渲染, 而且避免 webpack 去填充 process, 因为 vue 可以自己设置 VUE_ENV
      global 在浏览器中无法访问, 在 Node.js 中它是全局变量, webpack 依赖于 node 环境
     */
    var _isServer;
    var isServerRendering = function () {
      if (_isServer === undefined) {
        /* 如果不是浏览器不是 Weex 且 global 存在 */
        /* istanbul ignore if */
        if (!inBrowser && !inWeex && typeof global !== 'undefined') {
          // detect presence of vue-server-renderer and avoid
          // 检测vue-server-renderer的存在并避免 webpack 去填充 process
          // Webpack shimming the process
          _isServer = global['process'] && global['process'].env.VUE_ENV === 'server';
        } else {
          _isServer = false;
        }
      }
      return _isServer
    };
  
    // detect devtools
    // 检测 devtools
    var devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
  
    /* 
      判断是否为系统函数, 这些函数不是使用 JS 实现的, 打印它们将会返回 [native code] 比如
      Function.prototype.bind // ƒ bind() { [native code] }
      至于为什么返回这个, V8 引擎中可以找到这么一行 return 'function () { [native code] }';
      下面用于区分 Symbol、Reflect、Set 是系统函数, 还是用户自定义了一个同名变量, 如果当前浏览器原生支持, 这几个 ES6 新增加的对象, 就用原生对象
     */
    /* istanbul ignore next */
    function isNative (Ctor) {
      return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
    }
    /*  */
    var hasSymbol =
      typeof Symbol !== 'undefined' && isNative(Symbol) &&
      typeof Reflect !== 'undefined' && isNative(Reflect.ownKeys);
  
    var _Set;
    /* istanbul ignore if */ // $flow-disable-line
    if (typeof Set !== 'undefined' && isNative(Set)) {
      // use native Set when available.
      _Set = Set;
    } else {
      // a non-standard Set polyfill that only works with primitive keys.
      /* 
        如果原生不支持 Set, 就自定义一个非全局的 Set 对象(不会污染到全局) 并赋值给 _Set 
        非标准 Set polyfill，仅适用于原始类型的键
       */
      _Set = /*@__PURE__*/(function () {
        function Set () {
          this.set = Object.create(null);
        }
        Set.prototype.has = function has (key) {
          return this.set[key] === true
        };
        Set.prototype.add = function add (key) {
          this.set[key] = true;
        };
        Set.prototype.clear = function clear () {
          this.set = Object.create(null);
        };
  
        return Set;
      }());
    }
  
    /*  */
    /* 估计是, Flow 的检测机制问题, 函数变量如果要改变必须开始就指定为函数, 不允许从比如 Number 转 Function */
    var warn = noop;
    var tip = noop;
    var generateComponentTrace = (noop); // work around flow check
    // 解决 flow 检查, 不加括号估计就报错了? 
    var formatComponentName = (noop);
  
    /* VueJs 日志信息模块代码 */ 
    {
      var hasConsole = typeof console !== 'undefined';
      /* 
        匹配这样的 r, R, a_r, a_R, a-r, a-R, 因为 \w 也会匹配 _, 所以前面设置了一个非捕获组 ?:, 它将不会出现在结果数组中, 并且前面的 ^ 保证了, -r 或 _r 这种以 _ 或 - 开头的不会被匹配到 
        匹配字符串开始的位置后的英文字符或 - 或 _ 位置之后的英文字符
        之后把匹配到的英文字符变大写, 再把 - 或 _ 删了
        看起来是转了个大驼峰命名 ? 
        看了一下每个需要转化的变量(如 classify\hyphenate\camelize)都有它自己的正则规则, 名字都叫 xxxxRE, 把每个都区分了而不是共用, 共用可能比较混乱吧 ? 
      */
      var classifyRE = /(?:^|[-_])(\w)/g;
      var classify = function (str) { return str
        .replace(classifyRE, function (c) { return c.toUpperCase(); })
        .replace(/[-_]/g, ''); };
  
      warn = function (msg, vm) {
        // generateComponentTrace 翻译出来是生成组件追踪? 它会追踪到项目组件警告的踪迹, 是个定位功能 
        var trace = vm ? generateComponentTrace(vm) : '';
        // 判断是否在配置项里自定义了 warnHandler, 如果定义了用自定义的, 否则如果没定义同时用户没设置不需要报错信息(也就是 silent 不为 false), 则控制台打印 warn 警告信息
        if (config.warnHandler) {
          config.warnHandler.call(null, msg, vm, trace);
        } else if (hasConsole && (!config.silent)) {
          console.error(("[Vue warn]: " + msg + trace));
        }
      };
      // 如果 silent 不为 false, 则把提示打印在控制台
      tip = function (msg, vm) {
        if (hasConsole && (!config.silent)) {
          console.warn("[Vue tip]: " + msg + (
            vm ? generateComponentTrace(vm) : ''
          ));
        }
      };
      // 函数作用是返回组件名称的标签, 没定名字就返回 <Anonymous>(匿名), 如果它的根路径等于自身, 返回 <Root>
      formatComponentName = function (vm, includeFile) {
        if (vm.$root === vm) {
          return '<Root>'
        }
        /*
          typeof vm === 'function' && vm.cid != null
          ? vm.options 相当于 ( typeof vm === 'function' && vm.cid != null) ? vm.options, 是前面的整体包裹, 而不是只包括了 vm.cid 而变成这样 (vm.cid != null) ? vm.options
        */
        var options = typeof vm === 'function' && vm.cid != null
          ? vm.options
          : vm._isVue
            ? vm.$options || vm.constructor.options
            : vm;
        var name = options.name || options._componentTag;
        var file = options.__file;
        if (!name && file) {
          // 不匹配 \.vue 和 /.vue 这种 .vue 前面带 / 和 \ 的
          var match = file.match(/([^/\\]+)\.vue$/);
          name = match && match[1];
        }
  
        return (
          // classify 是之前的大驼峰转换方法
          (name ? ("<" + (classify(name)) + ">") : "<Anonymous>") +
          (file && includeFile !== false ? (" at " + file) : '')
        )
      };

      /* 
        将数字n转成二进制,实现累加，比用 for 循环减少累加次数
        这个函数重复 str n 次并返回, 它用了位运算
        模拟一下, 传入 'a', 7
        转二进制方法
        new Number(7).toString(2) === '111'
        或者 var a = 7
        a.toString(2) === '111'
        直接 7.toString(2) 是不行的, 规则 NumberObject.toString(radix)
        而赋值给 a 后, 调用方法的时候将会自动把 7 包装成 Number 对象

        第一轮
        7 % 2 === 1 // true  res = 'a'
        7 > 1 // true  str = 'aa'
        7 >> 1 === 3 // new Number(3).toString(2) === '11'
        第二轮
        3 % 2 === 1 // true res = 'a' + 'aa'
        3 > 1 // true str = 'aa' + 'aa'
        3 >> 1 === 1 // new Number(1).toString(2) === '1'
        第三轮
        1 % 2 === 1 // true res = 'aaa' + 'aaaa'
        1 > 1 // false
        1 >> 1 === 0 
        第四轮
        n === 0 // 跳出循环
        return 'aaaaaaa'
      */
      var repeat = function (str, n) {
        var res = '';
        while (n) {
          if (n % 2 === 1) { res += str; }
          if (n > 1) { str += str; }
          // 它是 n = n >> 1 的简写, 所以你不能写 3 >>= 1, 那就报错, 等号左边无效
          n >>= 1;
        }
        return res
      };
      /* 
        组件树规则 
        Vue 的 constructor 是 Vue(options)
        组件的 constructor 是 VueComponent(options)
        如果传入的 vm 是 组件的组件的组件, 也就是说它是
        vmc1 => vmc2 => vmc3 => Vue
        模拟一下
        1. vmc1 进入循环, tree.length === 0, cRS === 0 跳出 if, tree.push(vmc1), vm = vmc2, 此时 tree = [vmc1]
        2. vmc2 进入循环, tree.length > 0, last = vmc1, last.ctor === vmc2.ctor, cRS = 1, vm = vmc3, 再次执行 while, 此时 tree = [vmc1]
        3. vmc3 进入循环, tree.length > 0, last = vmc1, last.ctor === vmc3.ctor, cRS = 2, vm = Vue, 再次执行 while, 此时 tree = [vmc1]
        4. Vue 进入循环, tree.length > 0, last = vmc1, last.ctor !== Vue.ctor, cRS > 0, tree[0] = [vmc1, 2], cRS = 0, if 结束, tree.push(Vue), vm = Vue.$parent(undefined), 因此不再进入 while 循环, 此时 tree = [[vmc1, 2], Vue]
        5.执行 return, 返回


        found in

        ----> <vmc1> ... (2 recursive calls)
               <Root>
       */
      generateComponentTrace = function (vm) {
        // 如果参数vm存在 Vue 结构属性并且存在父组件
        if (vm._isVue && vm.$parent) {
          var tree = [];
          // currentRecursiveSequence 当前递归序列
          var currentRecursiveSequence = 0;
          // 生成树结构
          while (vm) {
            if (tree.length > 0) {
              var last = tree[tree.length - 1];
              if (last.constructor === vm.constructor) {
                currentRecursiveSequence++;
                vm = vm.$parent;
                continue
              } else if (currentRecursiveSequence > 0) {
                tree[tree.length - 1] = [last, currentRecursiveSequence];
                currentRecursiveSequence = 0;
              }
            }
            tree.push(vm);
            vm = vm.$parent;
          }
          /* 
            \n 表示回车
            recursive calls 递归调用
           */
          return '\n\nfound in\n\n' + tree
            .map(function (vm, i) { return ("" + (i === 0 ? '---> ' : repeat(' ', 5 + i * 2)) + (Array.isArray(vm)
                ? ((formatComponentName(vm[0])) + "... (" + (vm[1]) + " recursive calls)")
                : formatComponentName(vm))); })
            .join('\n')
        } else {
          return ("\n\n(found in " + (formatComponentName(vm)) + ")")
        }
      };
    }
  
    /*  */
    // Vue 中的每个实例对象都有自己的 id
    var uid = 0;
  
    /**
     * A dep is an observable that can have multiple
     * directives subscribing to it.
     */
    /* 
      Dep 构造函数。
      dep 可观察的, 可以有多个订阅它的指令。
    */
    var Dep = function Dep () {
      this.id = uid++;
      this.subs = []; // 这里保存了一个个 Watcher 实例
    };
    // 添加订阅
    Dep.prototype.addSub = function addSub (sub) {
      this.subs.push(sub);
    };
    // 移除订阅
    Dep.prototype.removeSub = function removeSub (sub) {
      remove(this.subs, sub);
    };
    /*
      设置某个 Watcher 的依赖
      这里添加了 Dep.target 是否存在的判断，目的是判断是不是 Watcher 的构造函数调用
      也就是说判断他是 Watcher 的 this.get 调用的，而不是普通调用
    */  
    Dep.prototype.depend = function depend () {
      // Dep.target 是一个全局可访问的渲染 Watcher
      if (Dep.target) {
        // 调用 add 方法, 把要进行渲染的 Watcher 与当前 Dep 实例关联起来, Vue 中存在非常多的相互引用
        Dep.target.addDep(this);
      }
    };

    Dep.prototype.notify = function notify () {
      // stabilize the subscriber list first
      var subs = this.subs.slice();
      if (!config.async) {
        // subs aren't sorted in scheduler if not running async
        // we need to sort them now to make sure they fire in correct
        // order
        /*   
          如果配置项中未运行异步，则子程序不会在调度程序中排序
          我们需要立即对它们进行排序，以确保其正确发射
          这相当于控制事件执行顺序, 将其排序以保证按顺序执行。
          排序
        */
        subs.sort(function (a, b) { return a.id - b.id; });
      }
      for (var i = 0, l = subs.length; i < l; i++) {
        // 调用 subs 数组中每一个 Watcher 的 update 方法, 更新视图
        subs[i].update();
      }
    };
  
    // The current target watcher being evaluated.
    // This is globally unique because only one watcher
    // can be evaluated at a time.
    /* 当前全局的渲染 Watcher, 它是全局唯一的，因为一次只能调用一个观察者。每当 Watcher 需要被渲染的时候，它就即将成为全局 Watcher, 当渲染结束后, 从全局中离开, 但仍存在 */
    Dep.target = null;
    // Dep.target 栈, 即存放需要挂在到全局上的 Watcher 对象的栈
    var targetStack = [];
  
    function pushTarget (target) {
      targetStack.push(target);
      Dep.target = target;
    }
  
    function popTarget () {
      targetStack.pop();
      Dep.target = targetStack[targetStack.length - 1];
    }
  
    /*  */
    /* 
      Vue 核心 Vnode 构造函数
      Vnode 表示虚拟节点, 把 DOM 标签, 属性, 内容都变成对象的属性, 用 JS 对象来描述真实 DOM
      什么用？
      1、兼容性强，不受执行环境的影响。VNode 因为是 JS 对象，不管 Node 还是 浏览器，都可以统一操作， 从而获得了服务端渲染、原生渲染、手写渲染函数等能力
      2、减少操作 DOM。任何页面的变化，都只使用 VNode 进行操作对比，只需要在最后一步挂载更新DOM，不需要频繁操作DOM，从而提高页面性能

      用法 比如用 Vnode 描述这样一个 template
      <div class="parent" style="height:0" href="2222">
        111111
      </div>

      可以得到
      {    
        tag: 'div',    
        data: {        
          attrs: { href:"2222" }
          staticClass: "parent",        
          staticStyle: {            
            height: "0"
          }
        },    
        children: [{        
          tag: undefined,        
          text: "111111"
        }]
      }
      这个 JS 对象，就已经囊括了整个模板的所有信息，完全可以根据这个对象来构造真实DOM了
      VNode存放什么信息
      新建一个 vNode 的时候，包含了非常多的属性，每个属性都是节点的描述的一部分
      我们只捡一些属性来探索一下，了解主体即可
      1、普通属性
        1、data
        1、存储节点的属性，class，style 等
        2、存储绑定的事件
        3、....其他
      2、elm
        真实 DOM 节点
        生成 VNode 的时候，并不存在真实 DOM
        elm 会在需要创建 DOM 时完成赋值，具体函数在 createElm 中
        赋值语句就是一句（简化了源码）vNode.elm = document.createElement(tag)  
      3、context
        渲染这个模板的上下文对象
        意思就是，template 里面的动态数据要从这个 context 中获取，而 context 就是 Vue 实例
        如果是页面，那么 context 就是本页面的实例，如果是组件，context 则是组件的实例
      4 isStatic
        是否是静态节点
        当一个节点被标记为静态节点的时候，说明这个节点可以不用去更新它了，当数据变化的时候，可以忽略去比对他，以提高比对效率
      组件相关属性
        1、parent
          这个parent 表示是组件的外壳节点
          额，什么是外壳节点，举个栗子先吧, 在页面中使用组件
          components: { test: { template: '<h2>wdnmd</h2>' } }
          <div>
            {{ name }} <test></test>
          </div>
          这时候会发现, test 其实有两个 VNode
            1. 页面给组件 test 生成的 
            {
              tag: 'test',
              children: undefined
            }
            2. 组件内部生成的
            {
              tag: 'h2',
              children: [
                { tag: undefined, text: 'wdnmd' }
              ]
            }
          这两种 VNode 都是正确的, 最后尤大判定第一个 VNode 是 第二个 VNode 的爸爸，也就是外壳节点 第二个组件还有一个 parent 属性, 指向第一个 VNode
        2 componentInstance
          这个顾名思义，就是组件生成的实例，保存在这里
          上面 test 组件的外壳节点中的 componentInstance
        3 componentOptions
          这个就存储一些 父子组件 PY 交易的证据
          比如 props，事件，slot 什么的，打印看下
          componentOptions:
           Ctor: VueComponents
           children: [Vnode]
           listeners: {event: f}
           propsData: {name: '111'}
           tag: 'test'
          其中 children 保存的就是 slot，listeners 保存 事件，propsData 保存 props
     */
    var VNode = function VNode (
      tag, // 标签名
      data,
      children, // 子元素
      text, // 文本内容
      elm, // Dom 节点
      context,
      componentOptions,
      asyncFactory
    ) {
      this.tag = tag;
      this.data = data;
      this.children = children;
      this.text = text;
      this.elm = elm;
      this.ns = undefined;
      this.context = context;
      this.fnContext = undefined;
      this.fnOptions = undefined;
      this.fnScopeId = undefined;
      this.key = data && data.key; // 短路写法. data 存在就返回 data.key, 否则返回 undefined
      this.componentOptions = componentOptions;
      this.componentInstance = undefined;
      this.parent = undefined;
      this.raw = false;
      this.isStatic = false; // 是否静态节点
      this.isRootInsert = true;
      this.isComment = false; // 是否注释节点
      this.isCloned = false; // 是否克隆节点
      this.isOnce = false;
      this.asyncFactory = asyncFactory;
      this.asyncMeta = undefined;
      this.isAsyncPlaceholder = false;
    };
    /* 
      如果没有设置 get, set 默认设置的是数据属性描述符对象, 否则设置的是访问器属性描述符对象
     */
    var prototypeAccessors = { child: { configurable: true } };
  
    // DEPRECATED: alias for componentInstance for backwards compat.
    // 已弃用：向后兼容的 componentInstance 的别名
    /* istanbul ignore next */
    prototypeAccessors.child.get = function () {
      return this.componentInstance
    };
  
    Object.defineProperties( VNode.prototype, prototypeAccessors );
  
    var createEmptyVNode = function (text) {
      /* 
        void 返回值永远是 undefined, 可以说, 使用 void 就是为了得到 undefined, 这在源码中非常常见
        为什么不直接使用 undefined? 
        1. undefined 并不是 JS 保留字, 所以你有时候不能放心使用 undefined, 在这一点上 null 就不一样, 它是保留字, 可以放心的被使用
        2. void 0 比 undefined 少几个字符, 这应该不太算是好处, 牺牲了可读性
      */
      if ( text === void 0 ) text = '';
  
      var node = new VNode();
      node.text = text;
      node.isComment = true;
      return node
    };
  
    function createTextVNode (val) {
      /*
        VNode 长这样
        var VNode = function VNode (
        tag,
        data,
        children,
        text,
        elm,
        context,
        componentOptions,
        asyncFactory
      )

      创建文本节点
      */
      return new VNode(undefined, undefined, undefined, String(val))
    }
  
    // optimized shallow clone
    // used for static nodes and slot nodes because they may be reused across
    // multiple renders, cloning them avoids errors when DOM manipulations rely
    // on their elm reference.
    /* 
      优化的浅拷贝
      用于静态节点和插槽节点，因为它们可以在多个节点之间重用
      多个渲染，拷贝它们可以避免在 DOM 操作依赖于它们的 elm 时出错
    */
    function cloneVNode (vnode) {
      var cloned = new VNode(
        vnode.tag,
        vnode.data,
        // #7975
        // clone children array to avoid mutating original in case of cloning
        // a child.
        /*
          拷贝 children 数组以避免在拷贝 child 的情况下变异原始对象。
        */
        vnode.children && vnode.children.slice(),
        vnode.text,
        vnode.elm,
        vnode.context,
        vnode.componentOptions,
        vnode.asyncFactory
      );
      cloned.ns = vnode.ns;
      cloned.isStatic = vnode.isStatic;
      cloned.key = vnode.key;
      cloned.isComment = vnode.isComment;
      cloned.fnContext = vnode.fnContext;
      cloned.fnOptions = vnode.fnOptions;
      cloned.fnScopeId = vnode.fnScopeId;
      cloned.asyncMeta = vnode.asyncMeta;
      cloned.isCloned = true;
      return cloned
    }
  
    /*
     * not type checking this file because flow doesn't play well with
     * dynamically accessing methods on Array prototype
     */
    /*
      不要类型检查此文件，因为 flow 不能与动态访问数组原型上的方法很好地配合
    */
   /**
    * 创建新的数组原型，插入到被响应化的数组的原型链上，用于劫持响应式的数组方法
    * 本来 arr => Array.prototype => Object.prototype => ...
    * 现在 arr => arrayProto => Array.prototype => Object.prototype
    * 这是切片编程，切开插点东西进去
    */
    var arrayProto = Array.prototype;
    var arrayMethods = Object.create(arrayProto);
  
    var methodsToPatch = [
      'push',
      'pop',
      'shift',
      'unshift',
      'splice',
      'sort',
      'reverse'
    ];
  
    /**
     * Intercept mutating methods and emit events
     */
    /*
      拦截变异方法并发出事件
      遍历会改变数组成员的数组方法，将其响应式化
    */
    methodsToPatch.forEach(function (method) {
      // cache original method
      // 保存原本方法，等一下因为等一下原生方法就要被覆盖找不到了，这个变量将在新值响应式化过程中调用
      var original = arrayProto[method];
      /*
        function def (obj, key, val, enumerable) {
          Object.defineProperty(obj, key, {
            value: val,
            enumerable: !!enumerable,
            writable: true,
            configurable: true
          });
        }
        这里通过 def 来重新定义 method, 并且可以将 method 设为不可枚举的属性。
      */
      def(arrayMethods, method, function mutator () {
        // 保存传入的参数
        var args = [], len = arguments.length;
        while ( len-- ) args[ len ] = arguments[ len ];

        // 传入调用方法时原本的上下文对象, 调用原生数组方法，并拿到原生方法的返回值，到时候用于返回
        var result = original.apply(this, args);
        // 拿到该数组上定义的 ob 实例
        var ob = this.__ob__;
        // 定义插入的值, 里面存放要被插入数组的值，本身是一个数组
        var inserted;
        switch (method) {
          // push 的短路写法，不写 break, 继续执行下一个选项的代码块
          case 'push':
          case 'unshift':
            inserted = args;
            break
          case 'splice':
            // splice(startIndex, delNum, newItem) 有三个参数，开始下标，删除数目，新插入的值。
            inserted = args.slice(2);
            break
        }
        // 如果存在新插入的值的数组，遍历它，并将其中的每一项都响应式化
        if (inserted) { ob.observeArray(inserted); }
        // notify change
        /*
          通知更新 Watch 更新
          拿到 ob 实例上的 Dep 实例, 调用 notify, 将会通知该 Dep 实例上的 subs 数组中的所有 Watcher 执行 update 方法
        */
        ob.dep.notify();
        // 返回调用原数组方法的结果。
        return result
      });
    });
  
    /*  */
    /*
      Object.getOwnPropertyNames(obj) 方法返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。
      不可枚举是指
      // 不可枚举方法
      Object.defineProperty(obj, 'myMethod', {
        enumerable: false,
        value: function() {}
      });
      Object.getOwnPropertyNames(obj) // ['myMethod']

      // 返回对象自身的属性名，不包括不可枚举属性
      Object.keys(obj) // []
    */
    var arrayKeys = Object.getOwnPropertyNames(arrayMethods);
  
    /**
     * In some cases we may want to disable observation inside a component's
     * update computation.
     */
    /*
      在某些情况下，我们可能希望禁用组件更新计算中的观察。
    */
    var shouldObserve = true;
    // 修改组件中是否需要更新的状态
    function toggleObserving (value) {
      shouldObserve = value;
    }
  
    /**
     * Observer class that is attached to each observed
     * object. Once attached, the observer converts the target
     * object's property keys into getter/setters that
     * collect dependencies and dispatch updates.
     */
    /*
      附加到每个观察对象的 Observer 类。附加后，观察者将目标对象的属性键转换为用于收集依赖性和调度更新的 getter / setter。

      Vue 核心 Observer 实例
    */
    var Observer = function Observer (value) {
      this.value = value;
      // 新建 dep 数据，到时候存放依赖
      this.dep = new Dep();
      // vm 实例数量
      this.vmCount = 0;
      /*
        给 value 添加 __ob__ 属性，值就是该 Observer 实例
        Vue.$data 中每个对象都有 __ob__ 属性,包括 Vue.$data 对象本身
        通过 def 来设置新值，不设置第四个参数相当于 enumerable: !!undefined
        即 enumerable: false, 不可枚举，将不会被 Object.keys() 遍历，因此不会无限递归
      */
      def(value, '__ob__', this);
      if (Array.isArray(value)) {
        /*
          全文只用了这一次 hasProto
          // can we use __proto__?
          var hasProto = '__proto__' in {}; 
          
          判断是否为数组，不是的话调用 walk() 添加 getter 和 setter 
          如果是数组，调用 observeArray() 遍历数组，为数组内每个对象添加 getter 和 setter 

          卧槽, 原来数组也能用 Object.defineProperty() 加属性啊。。
                  
        */
        // 这个 if 用于将数组方法改写。
        if (hasProto) {
          // 如果有 __proto__ 则在被响应式化的数组原型链上新建一个数组原型，用于劫持数组的 7 个修改数组的方法
          protoAugment(value, arrayMethods);
        } else {
          // 如果没有，就直接在该数组本身上改写那 7 个方法。
          copyAugment(value, arrayMethods, arrayKeys);
        }
        // 将数组内的每一项响应式化
        this.observeArray(value);
      } else {
        // 不是数组就调用 walk
        this.walk(value);
      }
    };
  
    /**
     * Walk through all properties and convert them into
     * getter/setters. This method should only be called when
     * value type is Object.
     */
    /*
      遍历所有属性并将它们转换为 getter / setter。仅当值类型为Object 时才应调用此方法。
    */
    Observer.prototype.walk = function walk (obj) {
      /*
        Object.keys() 用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。注意它同 for..in 一样不能保证属性按对象原来的顺序输出。
      */
      var keys = Object.keys(obj);
      // 遍历对象的属性，并将其响应式化
      for (var i = 0; i < keys.length; i++) {
        defineReactive$$1(obj, keys[i]);
      }
    };
  
    /**
     * Observe a list of Array items.
     */
    /*
      观察数组项列表。
      遍历传入的数组的每一项，递归调用 observe 方法，尝试创建新的 Observer 实例
      等一下可以看到 observe 如果传入一个基本类型值，它将什么都不做
      因此数组中的基本类型值将不会被响应式化，这可能是考虑到性能问题，数组一般很长
      并且我们几乎不用 a[index] = newVal 来操作数组。
      所以没有必要将基本类型值响应式化
    */
    Observer.prototype.observeArray = function observeArray (items) {
      for (var i = 0, l = items.length; i < l; i++) {
        // 递归
        observe(items[i]);
      }
    };
  
    // helpers
  
    /**
     * Augment a target Object or Array by intercepting
     * the prototype chain using __proto__
     */
    // 改写 target 数组的原型链
    function protoAugment (target, src) {
      /* eslint-disable no-proto */
      target.__proto__ = src;
      /* eslint-enable no-proto */
    }
  
    /**
     * Augment a target Object or Array by defining
     * hidden properties.
     */
    // 如果不存在 __proto__, 直接在 target 上重写数组方法来覆盖原型链上得到的方法
    /* istanbul ignore next */
    function copyAugment (target, src, keys) {
      for (var i = 0, l = keys.length; i < l; i++) {
        var key = keys[i];
        def(target, key, src[key]);
      }
    }
  
    /**
     * Attempt to create an observer instance for a value,
     * returns the new observer if successfully observed,
     * or the existing observer if the value already has one.
     */
    /**
     * 尝试为某个值创建一个观察者实例，如果成功观察到该观察者，则返回新的观察者
     * 如果该值已有一个观察者，则返回现有的观察者。
     */
    function observe (value, asRootData) {
      // 如果值不是对象或值是 VNode 什么都不做。
      if (!isObject(value) || value instanceof VNode) {
        return
      }
      var ob;
      // hasOwn(obj, prop) 就是 obj.hasOwnProperty(prop) 方法，为了写起来更短，定义了这么一个方法
      // 判断该对象上是否有 __ob__ 属性，并且该属性是 Ob 实例，那么就返回它
      if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
        ob = value.__ob__;
      } else if (
        // 否则判断一下
        shouldObserve && // 是否需要被观察，这属性是上面定义的，默认为 true
        !isServerRendering() && // 是否为服务端渲染
        (Array.isArray(value) || isPlainObject(value)) && // value 为数组或普通对象
        Object.isExtensible(value) && // value 是否可拓展，即是否可以为 value 添加新属性，默认可拓展。Object.preventExtensions，Object.seal 或 Object.freeze 方法都可以标记一个对象为不可扩展（non-extensible）。
        !value._isVue // value._isVue 是个是否渲染的标志，默认情况下没有该值，因此 value.!_isVue 始终为 true，在 Vue init 时，会将 _isVue 改为 true，防止被 observe
      ) {
        // 满足上面的条件就新建一个 Ob 实例
        ob = new Observer(value);
      }
      // asRootData 是否为根属性，它是个布尔值，在 Vue init 的时候会将其设置为 true
      if (asRootData && ob) {
        // 如果是根属性，即 $data 的 Ob, 就给它一个计数, 作为标志, 每有一个实例, 计数就加一
        ob.vmCount++; // 统计有多少个 vm 实例
      }
      return ob
    }
  
    /**
     * Define a reactive property on an Object.
     */
    /* 
      在对象上定义反应性属性。
      Vue 核心 双向绑定，其中传入的 val ，是一个闭包，将一直存在于该函数作用域内, 并且也只有该函数能使用
      这个闭包解决了 Object.defineProperty 的访问器必须依赖于某个全局的值的问题(平常写的时候这个被依赖的值很有可能是在全局都能访问的)

     */
    function defineReactive$$1 (
      obj, // 要响应式的对象
      key, // 要响应式的键名
      val, // 要响应式原本的键值，现在，它变成了访问器属性的容器
      customSetter,
      shallow
    ) {
      // 新建一个 Dep 实例
      var dep = new Dep();
      // 获取 obj 对象上 key 的描述属性，如果是不可修改的，就什么都不做，直接 return
      var property = Object.getOwnPropertyDescriptor(obj, key);
      if (property && property.configurable === false) {
        return
      }
  
      // cater for pre-defined getter/setters
      // 获取已定义的 setters / setter 方法(修改 $ 前缀的属性时会触发)，由于等会儿会修改 get 和 set, 先将其保存一份
      var getter = property && property.get;
      var setter = property && property.set;
      // 如果没有 get 或有 set, 同时只传了两个参数, 那就直接返回该对象的键值。
      if ((!getter || setter) && arguments.length === 2) {
        val = obj[key];
      }
      // 递归子属性，shallow 默认为 undefined, 在设置 $ 前缀的属性是会变成 true, 也就是说那时候不需要递归子属性
      var childOb = !shallow && observe(val);
      // Vue2.0 双向绑定
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        // 依赖收集
        get: function reactiveGetter () {
          // 是否有已定义的 getter, 如果有就调用它, 没有就把闭包的 val 赋值给 value
          var value = getter ? getter.call(obj) : val;
          // 是否存在 Dep.target, 因为有时候获取属性并不需要更新视图或计算属性、watch，就不需要收集该依赖。比如 console.log(this.name) 时，就没有 target, 不需要收集该依赖
          // 如果存在 Dep.target, 说明是全局 Watcher 在获取该属性，需要进行依赖收集
          if (Dep.target) {
          /*
            Dep.target 全局变量指向的就是当前正在解析指令 Complie 的 Watcher
            会执行 dep.addSub(Dep.target), 将 Watcher 添加到 Dep 对象的 Watcher 列表中, 互相引用
          */
            // 依赖收集, 将当前 Watcher 添加到 subs 数组中
            dep.depend();
            // 如果存在子 Ob
            if (childOb) {
              // 子 Ob 的 subs 也收录当前 Watcher
              childOb.dep.depend();
              // 如果 value 是数组
              if (Array.isArray(value)) {
                // 调用 dependArray, 调用数组中, 值为对象或数组的 __ob__ 的 dep 的 depend, 也收录当前 Watcher
                dependArray(value);
              }
            }
          }
          return value
        },
        // 派发更新
        set: function reactiveSetter (newVal) {
          // 是否有已定义的 getter, 如果有就调用它, 没有就把 val 赋值给 value
          var value = getter ? getter.call(obj) : val;
          /* eslint-disable no-self-compare */
          // 如果 新值 === 旧值, 就直接返回, 后面括号中的内容是为了验证 NaN, 因为两个 NaN 不相等, console.log(NaN == NaN) // false
          if (newVal === value || (newVal !== newVal && value !== value)) {
            return
          }
          /* eslint-enable no-self-compare */
          // 如果传入了自定义 Setter, 那就调用它
          if (customSetter) {
            customSetter();
          }
          // #7981: for accessor properties without setter
          // 用于只写了 getter 不带 setter 的访问器属性
          if (getter && !setter) { return }
          // 如果有 setter, 调用一下，传入上下文和新值
          if (setter) {
            setter.call(obj, newVal);
          } else {
            // 如果没有 setter, 将新值赋给 val (也就是最开始说的闭包的值)
            val = newVal;
          }
          // 为新值调用 observe, 返回的 Ob 赋值给 childOb
          childOb = !shallow && observe(newVal);
          // 派发更新, 通知 该 Dep 上的 subs 数组内的每一个 Watcher
          dep.notify();
        }
      });
    }
  
    /**
     * Set a property on an object. Adds the new property and
     * triggers change notification if the property doesn't
     * already exist.
     */
    /**
     * 在对象上设置属性。添加新属性，如果该属性尚不存在，则触发更改通知。
     * 就是我们使用的 $set 属性, 用于给对象或数组新增响应式属性
     */
    function set (target, key, val) {
      // target 是否为 undefined 或原始类型
      if (isUndef(target) || isPrimitive(target)
      ) {
        warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target))));
      }
      // 如果 target 是数组, 并且 key 是有效的数组索引，即 key 是 非无穷的正整数
      if (Array.isArray(target) && isValidArrayIndex(key)) {
        // 修改 target 的 length
        target.length = Math.max(target.length, key);
        // 在索引为 key 的位置添加新值
        target.splice(key, 1, val);
        return val
      }
      // 如果 key 是 target 的属性并且 key 不是个对象, 也就是说键名重复了
      if (key in target && !(key in Object.prototype)) {
        // 直接赋新值后返回
        target[key] = val;
        return val
      }
      // 获取 target 属性的 Ob
      var ob = (target).__ob__;
      // 如果为 target 是 Vue 实例，或 ob.vmCount 有值, 就证明 Ob 是 Vue 实例属性的 Ob, 即 $data 的 Ob, 也就是说 target 是 $data, 就抛出警告, 不要在运行时 set data, 而是在初始化时设置 data, 并 return
      // 也就是说，在 Vue 初始化完成后，不允许通过 set 新增 $data 或 Vue 实例的属性
      if (target._isVue || (ob && ob.vmCount)) {
        warn(
          'Avoid adding reactive properties to a Vue instance or its root $data ' +
          'at runtime - declare it upfront in the data option.'
        );
        return val
      }
      // 如果 target 没有 ob, 就只把 target[key] 赋上新值, 并返回, 不做响应式处理, 因为它可能是数组里的某项或用户通过 = 赋值的值, 他们不应该被响应式化
      if (!ob) {
        target[key] = val;
        return val
      }
      // 如果存在 ob, 就通过 ob.value 拿到 Ob 所在的属性的引用, 并响应式处理新值
      defineReactive$$1(ob.value, key, val);
      // 通知 ob 的 dep 更新视图, 收集依赖
      ob.dep.notify();
      // 返回新值
      return val
    }
  
    /**
     * Delete a property and trigger change if necessary.
     */
    /**
     * 删除属性，并在必要时触发更改。
     */
    function del (target, key) {
      // target 是否为 undefined 或原始类型
      if (isUndef(target) || isPrimitive(target)
      ) {
        warn(("Cannot delete reactive property on undefined, null, or primitive value: " + ((target))));
      }
      // 删除数组下标为 key 的索引
      if (Array.isArray(target) && isValidArrayIndex(key)) {
        target.splice(key, 1);
        return
      }
      var ob = (target).__ob__;
      // target 是 Vue 或 ob 是 $data
      if (target._isVue || (ob && ob.vmCount)) {
        warn(
          'Avoid deleting properties on a Vue instance or its root $data ' +
          '- just set it to null.'
        );
        return
      }
      // target 上没有 key 就直接返回, 没有这个属性当然就相当于删除了
      if (!hasOwn(target, key)) {
        return
      }
      // 删除该属性
      delete target[key];
      // 如果 target 上没有 Ob, 跳出
      if (!ob) {
        return
      }
      // 如果有 Ob, 通知一下
      ob.dep.notify();
    }
  
    /**
     * Collect dependencies on array elements when the array is touched, since
     * we cannot intercept array element access like property getters.
     */
    /**
     * 触摸数组时，请收集对数组元素的依赖关系
     * 因为我们无法像属性获取器那样拦截数组元素的访问。
     */
    function dependArray (value) {
      // 定义 e = undefined
      for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
        e = value[i];
        // 由于数组中的基础类型值实际上并没有 __ob__, 因为没有对数组内的基本类型值做响应式处理
        // 如果存在 e, 就看看 e.__ob__, 如果也存在, 就收集依赖
        // 相当于 e?.__ob__?.dep.depend()
        e && e.__ob__ && e.__ob__.dep.depend();
        // 如果是数组, 递归
        if (Array.isArray(e)) {
          dependArray(e);
        }
      }
    }
  
    /*  */
  
    /**
     * Option overwriting strategies are functions that handle
     * how to merge a parent option value and a child option
     * value into the final value.
     */
    /**
     * 选项覆盖策略是处理如何将父选项值和子选项值合并到最终值中的函数。
     * 拿到选项覆盖策略的值
     */
    var strats = config.optionMergeStrategies;
  
    /**
     * Options with restrictions
     */
    /**
     * 有限制的选项
     */
    {
      strats.el = strats.propsData = function (parent, child, vm, key) {
        if (!vm) {
          // 选项键只能在实例中使用 new 关键字创建
          warn(
            "option \"" + key + "\" can only be used during instance " +
            'creation with the `new` keyword.'
          );
        }
        return defaultStrat(parent, child)
      };
    }
  
    /**
     * Helper that recursively merges two data objects together.
     */
    /**
     * 递归地将两个数据对象合并在一起的 Helper
     * 合并两个对象的方法，被复制的属性是深拷贝
     */
    function mergeData (to, from) {
      // 如果没有 from, 返回 to
      if (!from) { return to }
      var key, toVal, fromVal;
      // 获取对象的键名数组。先判断一下是否有原生 Symbol, 有就用 Reflect, 没有就用 Object, 可以看到, 其实 Vue2.0 就已经在用 ES6 了, 只不过到 Vue3.0 全都改成 ES6 了
      var keys = hasSymbol
        ? Reflect.ownKeys(from)
        : Object.keys(from);
      
      // 遍历对象
      for (var i = 0; i < keys.length; i++) {
        key = keys[i];
        // in case the object is already observed...
        // 如果 key 为 __ob__, 跳过
        if (key === '__ob__') { continue }
        toVal = to[key];
        fromVal = from[key];
        // 如果 to 对象没有 key, 通过 set 设置响应式的 key 到 to 上
        if (!hasOwn(to, key)) {
          set(to, key, fromVal);
        } else if (
          // 否则如果 toVal 和 fromVal 不同且同时为普通对象, 递归
          toVal !== fromVal &&
          isPlainObject(toVal) &&
          isPlainObject(fromVal)
        ) {
          mergeData(toVal, fromVal);
        }
      }
      // 最后返回合并后的对象
      return to
    }
  
    /**
     * Data
     */
    // 以下的合并策略里会对 vm 进行判断，只要是看你是不是用了 new 操作符
    function mergeDataOrFn (
      parentVal,
      childVal,
      vm
    ) {
      // 没有 vm, 说明是 Vue.extend 合并
      if (!vm) {
        // in a Vue.extend merge, both should be functions
        // 在 Vue.extend 合并中，两者都应该是函数

        // 如果 parentVal 或 childVal 哪一方为 undefined, 直接返回另一方
        if (!childVal) {
          return parentVal
        }
        if (!parentVal) {
          return childVal
        }
        // when parentVal & childVal are both present,
        // we need to return a function that returns the
        // merged result of both functions... no need to
        // check if parentVal is a function here because
        // it has to be a function to pass previous merges.
        /**
         * 当 parentVal 和 childVal 都存在时
         * 我们需要返回一个函数，该函数返回两个函数的合并结果...
         * 此处无需检查 parentVal 是否为函数，因为它必须是传递先前合并的函数。
         */
        // 返回一个可以合并 Data 的函数
        return function mergedDataFn () {
          return mergeData(
          // 如果 childVal 为函数，调用它，获取返回值，如果 parentVal 为函数, 也调用它，获取返回值，大概是 data() {return{}} 这样的函数
            typeof childVal === 'function' ? childVal.call(this, this) : childVal,
            typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
          )
        }
      } else {
        // 如果存在vm
        return function mergedInstanceDataFn () {
          // instance merge
          // 实例合并
          var instanceData = typeof childVal === 'function'
            ? childVal.call(vm, vm)
            : childVal;
          var defaultData = typeof parentVal === 'function'
            ? parentVal.call(vm, vm)
            : parentVal;
          // 那么这两个函数应该是 data(){ return {} } 这种形式的或 data: {}, 所以需要接受一下返回值
          // 如果存在 instanceData, 合并，得到合并后的对象
          if (instanceData) {
            return mergeData(instanceData, defaultData)
          } else {
            // 否则返回原来的对象
            return defaultData
          }
        }
      }
    }
    // data 的数据合并策略
    strats.data = function (
      parentVal,
      childVal,
      vm
    ) {
      if (!vm) {
        if (childVal && typeof childVal !== 'function') {
          warn(
            'The "data" option should be a function ' +
            'that returns a per-instance value in component ' +
            'definitions.',
            vm
          );
  
          return parentVal
        }
        // 如果没有 vm, 那就不传
        return mergeDataOrFn(parentVal, childVal)
      }
      // 如果有 vm, 把 vm 传过去
      return mergeDataOrFn(parentVal, childVal, vm)
    };
  
    /**
     * Hooks and props are merged as arrays.
     */
    /**
     * hooks 和 props 合并为数组
     */
    // hook 的合并策略
    function mergeHook (
      parentVal,
      childVal
    ) {
      var res = childVal
        ? parentVal
          ? parentVal.concat(childVal)
          : Array.isArray(childVal)
            ? childVal
            : [childVal]
        : parentVal;
      return res
        ? dedupeHooks(res) // 去重
        : res
    }
    // 遍历 hooks, 去重
    function dedupeHooks (hooks) {
      var res = [];
      for (var i = 0; i < hooks.length; i++) {
        if (res.indexOf(hooks[i]) === -1) {
          res.push(hooks[i]);
        }
      }
      return res
    }
    // 遍历生命周期钩子的数组
    // strat 为 strategy (策略)简写
    LIFECYCLE_HOOKS.forEach(function (hook) {
      // 给每个钩子定义合并策略
      strats[hook] = mergeHook;
    });
  
    /**
     * Assets
     *
     * When a vm is present (instance creation), we need to do
     * a three-way merge between constructor options, instance
     * options and parent options.
     */
    /**
     * 存在 vm 时（创建实例），我们需要在构造函数选项, 实例选项和父选项之间进行三向合并。
     */
    function mergeAssets (
      parentVal,
      childVal,
      vm,
      key
    ) {
      var res = Object.create(parentVal || null);
      if (childVal) {
        // 报警告用的
        assertObjectType(key, childVal, vm);
        // 合并，浅拷贝
        return extend(res, childVal)
      } else {
        return res
      }
    }
    // var ASSET_TYPES = ['component', 'directive', 'filter']
    ASSET_TYPES.forEach(function (type) {
      strats[type + 's'] = mergeAssets;
    });
  
    /**
     * Watchers.
     *
     * Watchers hashes should not overwrite one
     * another, so we merge them as arrays.
     */
    /**
     * 观察者哈希值不应相互覆盖，因此我们将它们合并为数组。
     * watch 的合并策略
     */
    strats.watch = function (
      parentVal,
      childVal,
      vm,
      key
    ) {
      // work around Firefox's Object.prototype.watch...
      if (parentVal === nativeWatch) { parentVal = undefined; }
      if (childVal === nativeWatch) { childVal = undefined; }
      /* istanbul ignore if */
      // 返回一个继承自 parentVal 的对象
      if (!childVal) { return Object.create(parentVal || null) }
      {
        assertObjectType(key, childVal, vm);
      }
      if (!parentVal) { return childVal }
      var ret = {};
      // 新建对象用以合并，浅拷贝
      extend(ret, parentVal);
      for (var key$1 in childVal) {
        var parent = ret[key$1];
        var child = childVal[key$1];
        if (parent && !Array.isArray(parent)) {
          parent = [parent];
        }
        // 如果 childVal 里的键名与 parentVal 一样, 把 child 数组逐项添加到 parent 数组的最后
        ret[key$1] = parent
          ? parent.concat(child)
          : Array.isArray(child) ? child : [child];
      }
      return ret
    };
  
    /**
     * Other object hashes.
     */
    /**
     * 其他对象散列的合并策略，新建一个对象，先合并父元素，再合并子元素，如果有重复的键名，子元素覆盖父元素
     */
    strats.props =
    strats.methods =
    strats.inject =
    strats.computed = function (
      parentVal,
      childVal,
      vm,
      key
    ) {
      if (childVal && "development" !== 'production') {
        // assertObjectType 是警告提示的作用
        assertObjectType(key, childVal, vm);
      }
      if (!parentVal) { return childVal }
      var ret = Object.create(null);
      extend(ret, parentVal);
      if (childVal) { extend(ret, childVal); }
      return ret
    };
    strats.provide = mergeDataOrFn;
  
    /**
     * Default strategy.
     */
    /**
     * 默认策略
     */
    var defaultStrat = function (parentVal, childVal) {
      return childVal === undefined
        ? parentVal
        : childVal
    };
  
    /**
     * Validate component names
     */
    /**
     * 验证组件名是否正确
     */
    function checkComponents (options) {
      for (var key in options.components) {
        validateComponentName(key);
      }
    }
  
    function validateComponentName (name) {
      // 不正确报警告
      if (!new RegExp(("^[a-zA-Z][\\-\\.0-9_" + (unicodeRegExp.source) + "]*$")).test(name)) {
        warn(
          'Invalid component name: "' + name + '". Component names ' +
          'should conform to valid custom element name in html5 specification.'
        );
      }
      // 不要用原本 Vue 预留的标签名去注册组件，如 slot、component ，也不要用 HTML 定义的标签名去注册组件
      if (isBuiltInTag(name) || config.isReservedTag(name)) {
        warn(
          'Do not use built-in or reserved HTML elements as component ' +
          'id: ' + name
        );
      }
    }
  
    /**
     * Ensure all props option syntax are normalized into the
     * Object-based format.
     */
    /**
     * 确保所有 props 选项语法均已标准化为基于对象的格式。
     * 就是把 props 的每一项都改成对象的形式, 不管我们是写 props: ['list'] 还是 props: {list: Array} 还是 props: {list: {type: Array}} (都会变成这种形式), 它们最后的效果是一致的
     */
    function normalizeProps (options, vm) {
      var props = options.props;
      if (!props) { return }
      var res = {};
      var i, val, name;
      // 如果 props 是数组，遍历它, 如果某项不是字符串，警告，是字符串就把 - 后的第一个字母大写并且去掉 - , 并且把解析后的内容缓存起来, 下次可以直接获取。
      if (Array.isArray(props)) {
        i = props.length;
        while (i--) {
          val = props[i];
          if (typeof val === 'string') {
            name = camelize(val);
            // 给该项设置 type: null, 即接受所有的值，正常情况下我们 props 如果不是写成数组, 一般会写个 type: String 这样的内容
            res[name] = { type: null };
          } else {
            warn('props must be strings when using array syntax.');
          }
        }
        // 如果 props 是对象, 遍历它的属性, 同上将其做驼峰处理。接着判断一下键值为是否为对象, 是对象就直接赋值, 不是就将键值用对象包裹, 成为该对象上的 type 属性的值
      } else if (isPlainObject(props)) {
        for (var key in props) {
          val = props[key];
          name = camelize(key);
          res[name] = isPlainObject(val)
            ? val
            : { type: val };
        }
        // props 不是数组也不是对象就报错
      } else {
        warn(
          "Invalid value for option \"props\": expected an Array or an Object, " +
          "but got " + (toRawType(props)) + ".",
          vm
        );
      }
      // 设置 props 最终的属性
      options.props = res;
    }
  
    /**
     * Normalize all injections into Object-based format
     */
    /**
     * 将所有注入标准化为基于对象的格式
     */
    function normalizeInject (options, vm) {
      // 获取初始化传递的 options 的 inject 属性的引用
      var inject = options.inject;
      if (!inject) { return }
      // 移除 options.inject 对原属性的引用, 并新建一个空对象
      var normalized = options.inject = {};
      // 如果 inject 是数组, 遍历并以特定格式在 normalized 定义属性
      if (Array.isArray(inject)) {
        for (var i = 0; i < inject.length; i++) {
          normalized[inject[i]] = { from: inject[i] };
        }
        // 如果 inject 是对象, 遍历对象的属性
      } else if (isPlainObject(inject)) {
        for (var key in inject) {
          var val = inject[key];
          // val 是否为对象, 是的话就合并, 不是对象的话就新建对象, 并把 val 赋值给该对象上的 from 属性
          normalized[key] = isPlainObject(val)
          // 混合前定义一下这个对象上的属性, 不知道什么用, 感觉完全可以写成空对象 {}, 可能看起来方便点, 可读性更高？能直接知道混合后是什么
            ? extend({ from: key }, val)
            : { from: val };
        }
      // 不是数组也不是对象, 警告
      } else {
        warn(
          "Invalid value for option \"inject\": expected an Array or an Object, " +
          "but got " + (toRawType(inject)) + ".",
          vm
        );
      }
    }
  
    /**
     * Normalize raw function directives into object format.
     */
    /**
     * 将原始函数指令规范化为对象格式。
     */
    function normalizeDirectives (options) {
      var dirs = options.directives;
      if (dirs) {
        for (var key in dirs) {
          var def$$1 = dirs[key];
          if (typeof def$$1 === 'function') {
            // 如果 key 是函数格式, 将 key 改为 特定的对象格式, 默认为 bind 和 update 属性赋值该函数
            dirs[key] = { bind: def$$1, update: def$$1 };
          }
        }
      }
    }
    // 警告用的
    function assertObjectType (name, value, vm) {
      if (!isPlainObject(value)) {
        warn(
          "Invalid value for option \"" + name + "\": expected an Object, " +
          "but got " + (toRawType(value)) + ".",
          vm
        );
      }
    }
  
    /**
     * Merge two option objects into a new one.
     * Core utility used in both instantiation and inheritance.
     */
    /**
     * 将两个选项对象合并到一个新的对象中。在实例化和继承中都使用的核心实用程序。
     * 组件合并
     */
    function mergeOptions (
      parent,
      child,
      vm
    ) {
      {
        // 验证 child 组件名是否正确，弹警告用的
        checkComponents(child);
      }
      // 如果 child 为函数， child 赋值为 child.options
      if (typeof child === 'function') {
        child = child.options;
      }
      // 验证 child 的 props
      normalizeProps(child, vm);
      // 验证 inject
      normalizeInject(child, vm);
      // 验证 directive
      normalizeDirectives(child);
  
      // Apply extends and mixins on the child options,
      // but only if it is a raw options object that isn't
      // the result of another mergeOptions call.
      // Only merged options has the _base property.
      /**
       * 在子选项上应用扩展和混合，但前提是它是原始选项对象，而不是另一个 mergeOptions 调用的结果。
       * 仅合并的选项具有 _base 属性。
       */
      if (!child._base) {
        if (child.extends) {
          // 如果 child 上有 extends 属性，递归，参数为该属性
          parent = mergeOptions(parent, child.extends, vm);
        }
        if (child.mixins) {
          // 如果有 mixins 属性，拿到 mixins 的数组，逐项递归
          for (var i = 0, l = child.mixins.length; i < l; i++) {
            parent = mergeOptions(parent, child.mixins[i], vm);
          }
        }
      }
  
      var options = {};
      var key;
      for (key in parent) {
        mergeField(key);
      }
      for (key in child) {
        // 如果 parent 没有自己的 key 属性
        if (!hasOwn(parent, key)) {
          // 默认子盖父
          mergeField(key);
        }
      }
      function mergeField (key) {
        // 如果有定义自己的合并策略，使用自己的，否则使用默认合并策略
        var strat = strats[key] || defaultStrat;
        // 合并父子数据
        options[key] = strat(parent[key], child[key], vm, key);
      }
      return options
    }
  
    /**
     * Resolve an asset.
     * This function is used because child instances need access
     * to assets defined in its ancestor chain.
     */
    /**
     * 检测指令是否在组件对象上面，返回注册指令或组件的对象，包括检查 directives, filters, components
     */
    function resolveAsset (
      options, //参数
      type, // 类型, 只有 directives, filters, components 三种
      id, // 指令的 key
      warnMissing // 警告信息
    ) {
      /* istanbul ignore if */
      if (typeof id !== 'string') {
        return
      }
      var assets = options[type];
      // check local registration variations first
      // 首先检查本地注册变化，找到了直接 return
      if (hasOwn(assets, id)) { return assets[id] }
      // 没有就把 id 转成驼峰再找一次
      var camelizedId = camelize(id);
      if (hasOwn(assets, camelizedId)) { return assets[camelizedId] }
      // 如果还没有就把驼峰后的首字母大写，再找一次
      var PascalCaseId = capitalize(camelizedId);
      if (hasOwn(assets, PascalCaseId)) { return assets[PascalCaseId] }
      // fallback to prototype chain
      // 如果都没有, 从原型链上找
      var res = assets[id] || assets[camelizedId] || assets[PascalCaseId];
      // 如果 res 还是没有，警告
      if (warnMissing && !res) {
        warn(
          'Failed to resolve ' + type.slice(0, -1) + ': ' + id,
          options
        );
      }
      return res
    }
  
    /*  */
  
  
    /**
     * 验证 props 里的 key 是否有效, propsData 是从 VNode 上获取的, 并且为 props 里的属性添加 __ob__
     * 把 props 添加到观察者中
     */
    function validateProp (
      key,
      propOptions,
      propsData,
      vm
    ) {
      var prop = propOptions[key]; // 获取 prop 属性
      var absent = !hasOwn(propsData, key);
      var value = propsData[key]; // 获取值
      // boolean casting
      // 布尔型铸造
      // 根据 Boolean 和 prop.type 是不是相同类型, 内部执行 === , 来返回 0(两者同类型) 或 -1(不同)
      var booleanIndex = getTypeIndex(Boolean, prop.type);
      // 如果是布尔值
      if (booleanIndex > -1) {
        // 如果 propsData 里没有 key, 同时没有设置返回值
        if (absent && !hasOwn(prop, 'default')) {
          // value 设置为 false
          value = false;

          // 如果 value 为空或 value 与 key 的连字符形式(如 key 为 myVal, hyphenate 函数将将其会转成 my-val 的连字符形式)同值
        } else if (value === '' || value === hyphenate(key)) {
          // only cast empty string / same name to boolean if
          // 仅在以下情况下将空字符串/相同名称转换为布尔值
          // boolean has higher priority
          // 布尔值具有更高的优先级
          // 我们写 prop 的 type 的属性的时候，我们有时候允许接受多个类型值，写成 [Boolean, String] 这种形式，然后就有下面的检测了。
          var stringIndex = getTypeIndex(String, prop.type);
          // 验证 String 与 prop.type 是不是类型相同，或 Boolean 的索引小于 String 的索引
          if (stringIndex < 0 || booleanIndex < stringIndex) {
            // value 为 true
            value = true;
          }
        }
      }
      // check default value
      // 检查默认值, 如果 prop.type 不为 String 和 Boolean, 且 value 为 undefined
      if (value === undefined) {
        // 拿到默认值
        value = getPropDefaultValue(vm, prop, key);
        // since the default value is a fresh copy,
        // make sure to observe it.
        /**
         * 由于默认值为全新副本，因此请务必观察。
         */
        // 因为某些情况下我们可能需要禁用观察，所以可能有时候不是 true
        var prevShouldObserve = shouldObserve; // shouldObserve 默认为 true, 把值给 prevShouldObserve
        toggleObserving(true); // 把 shouldObserve 转为 true
        observe(value); // 观测 value
        toggleObserving(prevShouldObserve); // 把 shouldObserve 的值变成 prevShouldObserve 的值
      }
      {
        // 判断一下 prop 是否满足规范，警告用的, prop 是 props 里属性的 type 值, key 是 props 的 key,
        assertProp(prop, key, value, vm, absent);
      }
      return value
    }
  
    /**
     * Get the default value of a prop.
     */
    function getPropDefaultValue (vm, prop, key) {
      // no default, return undefined
      // prop 本身是否有 default 属性，没有就 return undefined
      if (!hasOwn(prop, 'default')) {
        return undefined
      }
      // 如果有，就把值给 def
      var def = prop.default;
      // warn against non-factory defaults for Object & Array
      // 如果 def 是个对象或数组，就警告
      if (isObject(def)) {
        warn(
          'Invalid default value for prop "' + key + '": ' +
          'Props with type Object/Array must use a factory function ' +
          'to return the default value.',
          vm
        );
      }
      // the raw prop value was also undefined from previous render,
      // return previous default value to avoid unnecessary watcher trigger
      /**
       * 原始 prop 值也未从先前的渲染中定义，请返回先前的默认值以避免不必要的观察者触发
       * 如果传入的初始值里
       */
      if (vm && vm.$options.propsData &&
        vm.$options.propsData[key] === undefined &&
        vm._props[key] !== undefined
      ) {
        return vm._props[key]
      }
      // call factory function for non-Function types
      // a value is Function if its prototype is function even across different execution context
      /**
       * 为非函数类型调用工厂函数
       * 如果非原型类型是跨不同执行上下文的函数，值是函数
       */
      return typeof def === 'function' && getType(prop.type) !== 'Function'
        ? def.call(vm)
        : def
    }
  
    /**
     * Assert whether a prop is valid.
     */
    /**
     * 断言 prop 是否有效。
     */
    function assertProp (
      prop,
      name,
      value,
      vm,
      absent
    ) {
      // 如果 prop 被要求填写了，但是它没被写上
      if (prop.required && absent) {
        warn(
          'Missing required prop: "' + name + '"',
          vm
        );
        return
      }
      // 如果 prop 被要求写上了，但是 value 没写上
      if (value == null && !prop.required) {
        return
      }
      var type = prop.type;
      var valid = !type || type === true;
      var expectedTypes = [];
      if (type) {
        // 如果 type 不是数组, 把它变成数组，原来的值为该数组首项
        if (!Array.isArray(type)) {
          type = [type];
        }
        // 遍历 type, 只要遇到 valid 为 false, 即不合法的, 跳出循环
        for (var i = 0; i < type.length && !valid; i++) {
          // 这个函数返回一个对象，包含值是否格式正确的布尔值(valid)和值的类型(expectedType)
          var assertedType = assertType(value, type[i]);
          // 把值的类型 push 进 expectedTypes 数组
          expectedTypes.push(assertedType.expectedType || '');
          // valid 表示格式是否正确的布尔值
          valid = assertedType.valid;
        }
      }
      // 如果 vaild 为 false, 验证不合法，警告
      if (!valid) {
        warn(
          getInvalidTypeMessage(name, value, expectedTypes),
          vm
        );
        return
      }
      // prop 的验证规则
      var validator = prop.validator;
      // 它是个函数，如果存在
      if (validator) {
        // 如果验证不通过，警告
        if (!validator(value)) {
          warn(
            'Invalid prop: custom validator check failed for prop "' + name + '".',
            vm
          );
        }
      }
    }
    // 检测基本类型值的正则
    var simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/;

    // 用于返回一个对象，包含值是否格式正确的布尔值(valid)和值的类型(expectedType)
    function assertType (value, type) {
      var valid;
      // 获取 type 的类型, 如 String Boolean 这种
      var expectedType = getType(type);
      // 正则匹配 var simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/;
      // 如果能匹配到以上基本类型
      if (simpleCheckRE.test(expectedType)) {
        // 获取 value 的类型
        var t = typeof value;
        // 判断 value 的类型与 type 的类型(转成小写比较)是否一致
        valid = t === expectedType.toLowerCase();
        // for primitive wrapper objects
        // 如果类型不一致，而且 value 为 object
        if (!valid && t === 'object') {
          // 判断 value 是否为 type 的实例，并把值赋给 valid
          valid = value instanceof type;
        }

        // 如果 type 类型为对象
      } else if (expectedType === 'Object') {
        // 判断一下 value 是否为基本类型对象
        valid = isPlainObject(value);
        // 如果 type 为 Array
      } else if (expectedType === 'Array') {
        // 判断一下 value 是否为 Array
        valid = Array.isArray(value);
      } else {
        // 否则 看看 value 是否为 type 的实例
        valid = value instanceof type;
      }
      // 返回一个对象，包含值是否格式正确的布尔值(valid)和值的类型(expectedType)
      return {
        valid: valid,
        expectedType: expectedType
      }
    }
  
    /**
     * Use function string name to check built-in types,
     * because a simple equality check will fail when running
     * across different vms / iframes.
     */
    /**
     * 使用功能字符串名称来检查内置类型，因为在不同的 vms / iframe 上运行时，简单的相等性检查将失败。
     */
    // 返回传入值的类型, 如 'Boolean'、'String'、'Number' 等
    function getType (fn) {
      var match = fn && fn.toString().match(/^\s*function (\w+)/);
      return match ? match[1] : ''
    }
    // 比较两者类型是否相同
    function isSameType (a, b) {
      return getType(a) === getType(b)
    }
    // 获取 type 在 expectedTypes 数组中的索引， type 为基本类型值，如 String
    function getTypeIndex (type, expectedTypes) {
      // 如果 expectedTypes 不是数组，那就直接比较它和 type
      if (!Array.isArray(expectedTypes)) {
        return isSameType(expectedTypes, type) ? 0 : -1
      }
      // 如果 expectedTypes 是数组，遍历它，如果发现 type 在该数组中存在，直接返回索引
      for (var i = 0, len = expectedTypes.length; i < len; i++) {
        if (isSameType(expectedTypes[i], type)) {
          return i
        }
      }
      // 找不到返回 -1
      return -1
    }
    // 警告用的函数
    function getInvalidTypeMessage (name, value, expectedTypes) {
      var message = "Invalid prop: type check failed for prop \"" + name + "\"." +
        " Expected " + (expectedTypes.map(capitalize).join(', '));
      var expectedType = expectedTypes[0];
      var receivedType = toRawType(value);
      var expectedValue = styleValue(value, expectedType);
      var receivedValue = styleValue(value, receivedType);
      // check if we need to specify expected value
      if (expectedTypes.length === 1 &&
          isExplicable(expectedType) &&
          !isBoolean(expectedType, receivedType)) {
        message += " with value " + expectedValue;
      }
      message += ", got " + receivedType + " ";
      // check if we need to specify received value
      if (isExplicable(receivedType)) {
        message += "with value " + receivedValue + ".";
      }
      return message
    }
    // 将 value 转为 type 的类型
    function styleValue (value, type) {
      if (type === 'String') {
        return ("\"" + value + "\"")
      } else if (type === 'Number') {
        return ("" + (Number(value)))
      } else {
        return ("" + value)
      }
    }
    // 是可解释的值 , 传入的值是否为 'string', 'number', 'boolean' 之一
    function isExplicable (value) {
      var explicitTypes = ['string', 'number', 'boolean'];
      // 返回 传入的值是上面这个数组中的某项的布尔值
      return explicitTypes.some(function (elem) { return value.toLowerCase() === elem; })
    }
    // 传入的值是否有 'boolean' 字样
    function isBoolean () {
      // 浅拷贝传入的值
      var args = [], len = arguments.length;
      while ( len-- ) args[ len ] = arguments[ len ];
      // 返回 该数组中是否有值为 'boolean' 的项的布尔值
      return args.some(function (elem) { return elem.toLowerCase() === 'boolean'; })
    }
  
    /*  */
    // 处理错误
    // err 原生错误信息
    // vm 实例
    // info 什么导致的错误 如 'nextTick'，即调用 nextTick 导致的
    /**
     * 这是向外暴露的方法。 handleError 方法中获取到报错的组件，之后递归查找当前组件的父组件，
     * 依次调用 errorCaptured 方法。在遍历调用完所有 errorCaptured 方法，或 errorCaptured 方法报错时，
     * 调用 globalHandleError 方法，该方法调用了全局的 errorHandler 方法，如果全局的这个方法也报错，
     * 那就会 console.error(err) 或 throw err
     * 如果某个组件的 errorCaptured 方法返回了 false，那么这个异常信息不会再向上冒泡也不会再调用 errorHandler 方法
     */

    function handleError (err, vm, info) {
      // Deactivate deps tracking while processing error handler to avoid possible infinite rendering.
      // See: https://github.com/vuejs/vuex/issues/1505

      // 将 Dep.target 设为 undefined
      // 往 targetStack 数组中压入一个 undefined
      // 避免错误收集依赖
      pushTarget();
      try {
        if (vm) {
          var cur = vm;
          while ((cur = cur.$parent)) {
            // errorCaptured 是生命周期函数，当错误发生时会调用, 拿到定义的错误处理函数数组
            var hooks = cur.$options.errorCaptured;
            if (hooks) {
              // 一一调用之
              for (var i = 0; i < hooks.length; i++) {
                try {
                  // 调用函数看看函数返回值是否为 false
                  var capture = hooks[i].call(cur, err, vm, info) === false;
                  // 如果函数返回值为 false，直接 return 出去
                  if (capture) { return }
                } catch (e) {
                  // 如果函数报错了，处理一下，就是报点错，由于 cur 一直在往上层走，所以会在报错中看到报错的组件路径
                  globalHandleError(e, cur, 'errorCaptured hook');
                }
              }
            }
          }
        }
        globalHandleError(err, vm, info);
      } finally {
        // 移除 targetStack 中的 undefined
        // Dep.target 也不再试刚刚添加的 undefined
        popTarget();
      }
    }
    // 调用它并包含错误处理， Vue 在方法外面封装了一层 invoker(调用器)，函数的调用都放在 try 里了，防止报错了页面直接不运行了， 返回的也还是函数执行的返回值，就像正常调用一样。
    function invokeWithErrorHandling (
      handler,
      context,
      args, // 传入的参
      vm,
      info
    ) {
      var res;
      try {
        // 判断是否有参，分情况调用
        res = args ? handler.apply(context, args) : handler.call(context);
        if (res && !res._isVue && isPromise(res) && !res._handled) {
          res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); });
          // issue #9511
          // avoid catch triggering multiple times when nested calls
          res._handled = true;
        }
      } catch (e) {
        handleError(e, vm, info);
      }
      return res
    }
    // 全局错误处理
    function globalHandleError (err, vm, info) {
      // 如果有自定的错误处理函数，就调用它
      if (config.errorHandler) {
        try {
          return config.errorHandler.call(null, err, vm, info)
        } catch (e) {
          // if the user intentionally throws the original error in the handler,
          // do not log it twice
          if (e !== err) {
            logError(e, null, 'config.errorHandler');
          }
        }
      }
      // 打印错误
      logError(err, vm, info);
    }
  
    function logError (err, vm, info) {
      {
        warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);
      }
      /* istanbul ignore else */
      // 如果在浏览器或 inWeex 环境下，同时存在 console，就打印错误，否则 throw
      if ((inBrowser || inWeex) && typeof console !== 'undefined') {
        console.error(err);
      } else {
        throw err
      }
    }
  
    /*  */
    // 是否使用微任务
    var isUsingMicroTask = false;
    // 回调数组
    var callbacks = [];
    var pending = false;
    // flushCallbacks 用来清空回调队列和依次执行回调。
    function flushCallbacks () {
      pending = false;
      // 拷贝一份原回调数组
      var copies = callbacks.slice(0);
      // 把原回调数组清空
      callbacks.length = 0;
      // 依次执行回调
      for (var i = 0; i < copies.length; i++) {
        copies[i]();
      }
    }
  
    // Here we have async deferring wrappers using microtasks.
    // In 2.5 we used (macro) tasks (in combination with microtasks).
    // However, it has subtle problems when state is changed right before repaint
    // (e.g. #6813, out-in transitions).
    // Also, using (macro) tasks in event handler would cause some weird behaviors
    // that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109).
    // So we now use microtasks everywhere, again.
    // A major drawback of this tradeoff is that there are some scenarios
    // where microtasks have too high a priority and fire in between supposedly
    // sequential events (e.g. #4521, #6690, which have workarounds)
    // or even between bubbling of the same event (#6566).
    /**
     * 在这里，我们使用微任务异步延迟包装器。
     * 在2.5中，我们使用了（宏）任务（结合了微任务）。
     * 但是，在重新粉刷之前更改状态时，它存在一些细微的问题
     * （例如＃6813，外向内过渡）。
     * 另外，在事件处理程序中使用（宏）任务会导致一些奇怪的行为
     * 无法绕过的内容（例如，＃7109，＃7153，＃7546，＃7834，＃8109）。
     * 因此，我们现在再次在各处使用微任务。
     * 这种折衷的主要缺点是存在一些方案
     * 微任务的优先级过高，并且据称介于两者之间
     * 顺序事件（例如＃4521，＃6690，它们具有解决方法）
     * 甚至在同一事件冒泡之间（＃6566）。
     */
    var timerFunc;
  
    // The nextTick behavior leverages the microtask queue, which can be accessed
    // via either native Promise.then or MutationObserver.
    // MutationObserver has wider support, however it is seriously bugged in
    // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
    // completely stops working after triggering a few times... so, if native
    // Promise is available, we will use it:
    /**
     * nextTick行为利用了微任务队列，可以访问它
     * 通过本地Promise.then 或 MutationObserver。
     * MutationObserver拥有更广泛的支持，但是在此方面存在严重错误
     * 在触摸事件处理程序中触发时，iOS> = 9.3.3中的 UIWebView 。它
     * 触发几次后完全停止工作...因此，如果是原生的
     * Promise 可用，我们将使用它：
     */
    /* istanbul ignore next, $flow-disable-line */
    if (typeof Promise !== 'undefined' && isNative(Promise)) {
      var p = Promise.resolve();
      timerFunc = function () {
        p.then(flushCallbacks);
        // In problematic UIWebViews, Promise.then doesn't completely break, but
        // it can get stuck in a weird state where callbacks are pushed into the
        // microtask queue but the queue isn't being flushed, until the browser
        // needs to do some other work, e.g. handle a timer. Therefore we can
        // "force" the microtask queue to be flushed by adding an empty timer.
        /**
         * 在有问题的 UIWebViews 中，Promise.then 不会完全中断，但是
         * 它可能会陷入怪异的状态，其中回调被推送到
         * 微任务队列，但队列没有被刷新，直到浏览器
         * 需要做一些其他工作，例如处理一个计时器。因此，我们可以
         * 通过添加一个空计时器来“强制”刷新微任务队列。
         */
        if (isIOS) { setTimeout(noop); }
      };
      // 使用微任务
      isUsingMicroTask = true;
    } else if (!isIE && typeof MutationObserver !== 'undefined' && (
      isNative(MutationObserver) ||
      // PhantomJS and iOS 7.x
      MutationObserver.toString() === '[object MutationObserverConstructor]'
    )) {
      // Use MutationObserver where native Promise is not available,
      // 当原生 Promise 不可用的时候使用 MutationObserver
      // e.g. PhantomJS, iOS7, Android 4.4
      // (#6466 MutationObserver is unreliable in IE11)
      var counter = 1;
      var observer = new MutationObserver(flushCallbacks);
      var textNode = document.createTextNode(String(counter));
      observer.observe(textNode, {
        characterData: true
      });
      timerFunc = function () {
        counter = (counter + 1) % 2;
        textNode.data = String(counter);
      };
      isUsingMicroTask = true;
    } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
      // Fallback to setImmediate.
      // Technically it leverages the (macro) task queue,
      // but it is still a better choice than setTimeout.
      /**
       * 退回到 setImmediate。
       * 从技术上讲，它利用（宏）任务队列，
       * 但它仍然是比setTimeout更好的选择。
       * 如果 Promise 和 MutationObserver 都不可用，将会使用 setImmediate。
       */
      timerFunc = function () {
        setImmediate(flushCallbacks);
      };
    } else {
      // Fallback to setTimeout.
      // 都不可用的时候退回到 setTimeout, 它将是最后的方案
      timerFunc = function () {
        setTimeout(flushCallbacks, 0);
      };
    }
    // 把 cb 压入 callbacks 数组的最后，并在调用它的时候传入 ctx 上下文
    // 其实是为 callbacks 数组收集 cb, 并且根据 pending 状态决定是否触发 callbacks 队列函数
    function nextTick (cb, ctx) {
      var _resolve;
      callbacks.push(function () {
        if (cb) {
          try {
            cb.call(ctx);
          } catch (e) {
            handleError(e, ctx, 'nextTick');
          }
        } else if (_resolve) {
          // 如果_resolve 存在就执行
          _resolve(ctx);
        }
      });
      // 如果 pending 是 false，这就是 Promise 的状态，模拟一下
      if (!pending) {
        // 修改状态
        pending = true;
        // 清空 callbacks 数组 ，里面调用了 flushCallbacks，但它被 .then() 方法包裹，将会被放入微任务队列中
        // 即异步触发 callbacks 队列中的函数
        timerFunc();
      }
      // $flow-disable-line
      // 如果 cb 不存在 同时原生 Primose 存在
      if (!cb && typeof Promise !== 'undefined') {
        // 返回一个新的 Promise，它的状态好像永远都是 pending。。
        return new Promise(function (resolve) {
          _resolve = resolve;
        })
      }
    }
  
    /*  */
  
    var mark;
    var measure;
  
    {
      // 浏览器性能监控
      // 看看 MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Window/performance
      var perf = inBrowser && window.performance;
      /* istanbul ignore if */
      if (
        perf &&
        perf.mark &&
        perf.measure &&
        perf.clearMarks &&
        perf.clearMeasures
      ) {
        mark = function (tag) { return perf.mark(tag); };
        measure = function (name, startTag, endTag) {
          perf.measure(name, startTag, endTag);
          perf.clearMarks(startTag);
          perf.clearMarks(endTag);
          // perf.clearMeasures(name)
        };
      }
    }
  
    /* not type checking this file because flow doesn't play well with Proxy */
  
    var initProxy;
  
    {
      // 把下面的字符串以逗号分隔为数组并缓存起来, 放到 allowedGlobals 中
      var allowedGlobals = makeMap(
        'Infinity,undefined,NaN,isFinite,isNaN,' +
        'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
        'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
        'require' // for Webpack/Browserify
      );

      // 不存在 key 放出的警告
      var warnNonPresent = function (target, key) {
        warn(
          "Property or method \"" + key + "\" is not defined on the instance but " +
          'referenced during render. Make sure that this property is reactive, ' +
          'either in the data option, or for class-based components, by ' +
          'initializing the property. ' +
          'See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',
          target
        );
      };

      // 如果使用了 Vue 保留的前缀的警告, 以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。
      var warnReservedPrefix = function (target, key) {
        warn(
          "Property \"" + key + "\" must be accessed with \"$data." + key + "\" because " +
          'properties starting with "$" or "_" are not proxied in the Vue instance to ' +
          'prevent conflicts with Vue internals. ' +
          'See: https://vuejs.org/v2/api/#data',
          target
        );
      };
      // 判断是否有 ES6 的 Proxy 对象
      var hasProxy =
        typeof Proxy !== 'undefined' && isNative(Proxy);
      
      // 如果有 Proxy, 
      if (hasProxy) {
        // 把下面的字符缓存起来
        var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact');
        // 把 config 里的 keyCodes 用 Proxy 代理
        config.keyCodes = new Proxy(config.keyCodes, {
          set: function set (target, key, value) {
            // 如果自定义的 keyCodes 和上面的这几个重了，警告一下，并且返回 false, 不允许设置
            if (isBuiltInModifier(key)) {
              warn(("Avoid overwriting built-in modifier in config.keyCodes: ." + key));
              return false
            } else {
              // 否则就在对象上加上自己设置的按键
              target[key] = value;
              return true
            }
          }
        });
      }
  
      var hasHandler = {
        // Proxy 的 has
        has: function has (target, key) {
          var has = key in target;
          // allowedGlobals 是上面用 makeMap 缓存过的内容, 看看 key 是否在它里面, 或 key 为 string 同时以 _ 开头, 同时 key 不是我们传入的 data 中的内容
          var isAllowed = allowedGlobals(key) ||
            (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data));
          // 如果 key 不在 target 中，也不在 allowedGlobals 中，也不是 Vue 定义的 key
          if (!has && !isAllowed) {
            // 如果 key 是我们定义的 data 中的内容, 警告一下， _ 开头的属性将不会被代理到 Vue 实例上
            if (key in target.$data) { warnReservedPrefix(target, key); }
            // 否则警告 key 不存在
            else { warnNonPresent(target, key); }
          }
          return has || !isAllowed
        }
      };
  
      var getHandler = {
        // Proxy 的 get
        get: function get (target, key) {
          // 如果 key 是字符串且 key 不在 target 上
          if (typeof key === 'string' && !(key in target)) {
            // 如果 key 是我们定义的，警告一下
            if (key in target.$data) { warnReservedPrefix(target, key); }
            // 否则警告 key 找不到
            else { warnNonPresent(target, key); }
          }
          return target[key]
        }
      };

      // 初始化 Proxy
      initProxy = function initProxy (vm) {
        // 如果有 Proxy
        if (hasProxy) {
          // determine which proxy handler to use
          // 确定要使用的代理处理程序
          var options = vm.$options;
          // 看看有没有 options.render._withStripped 属性, 如果有，就代理 get，否则代理 has
          var handlers = options.render && options.render._withStripped
            ? getHandler
            : hasHandler; // 判断内部函数
          // 实例化代理对象，就是添加一下警告日志
          vm._renderProxy = new Proxy(vm, handlers);
        } else {
          // 如果没有 Proxy, 直接赋值
          vm._renderProxy = vm;
        }
      };
    }
  
    /*  */
    // _Set 是 Set 对象, 如果本身支持 Set, 那就是原生 Set, 不然就是 Vue 实现的非标准 polyfill 的 Set, 仅适用于 Vue 自己的 Set
    var seenObjects = new _Set();
  
    /**
     * Recursively traverse an object to evoke all converted
     * getters, so that every nested property inside the object
     * is collected as a "deep" dependency.
     */
    /**
     * 递归遍历一个对象以唤起所有已转换的 getter
     * 以便将该对象内的每个嵌套属性收集为“深度”依赖项
     */
    function traverse (val) {
      _traverse(val, seenObjects);
      // 清空 Set
      seenObjects.clear();
    }
  
    function _traverse (val, seen) {
      var i, keys;
      var isA = Array.isArray(val);
      // 如果 val 不是数组也不是对象 或者被冻结 或者是 VNode 的实例，啥也不干直接出去
      if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
        return
      }
      // 如果 val 已经被 observe 过了
      if (val.__ob__) {
        // 获取一下 depId
        var depId = val.__ob__.dep.id;
        // 如果 seen 里有这个 dep 了，就直接出去
        if (seen.has(depId)) {
          return
        }
        // 没有就添加一下这个 depId
        seen.add(depId);
      }
      // 如果是数组
      if (isA) {
        i = val.length;
        // 遍历该数组，递归，收集依赖
        while (i--) { _traverse(val[i], seen); }
      } else {
        // 如果是对象
        keys = Object.keys(val);
        i = keys.length;
        // 同样遍历，递归，收集依赖
        while (i--) { _traverse(val[keys[i]], seen); }
      }
    }
  
    /*  */
    // 这个函数主要用于将传入的带有特殊前缀的事件修饰符分解为具有特定值的事件对象，并缓存
    var normalizeEvent = cached(function (name) {
      var passive = name.charAt(0) === '&';
      name = passive ? name.slice(1) : name;
      var once$$1 = name.charAt(0) === '~'; // Prefixed last, checked first
      name = once$$1 ? name.slice(1) : name;
      var capture = name.charAt(0) === '!';
      name = capture ? name.slice(1) : name;
      return {
        name: name,
        once: once$$1,
        capture: capture,
        passive: passive
      }
    });
    
    // 创建一个调用者， Vue 给方法外面封装了一层 invoker
    function createFnInvoker (fns, vm) {
      function invoker () {
        var arguments$1 = arguments;
  
        var fns = invoker.fns;
        // 如果 fns 是数组
        if (Array.isArray(fns)) {
          var cloned = fns.slice();
          // 遍历 fns，调用它
          for (var i = 0; i < cloned.length; i++) {
            invokeWithErrorHandling(cloned[i], null, arguments$1, vm, "v-on handler");
          }
        } else {
          // return handler return value for single handlers
          return invokeWithErrorHandling(fns, null, arguments, vm, "v-on handler")
        }
      }
      invoker.fns = fns;
      return invoker
    }

    // 更新事件，并为新的值调用添加函数，旧的值删除函数，在 新旧 VNode 对比的时候会调用
    function updateListeners (
      on, // 新事件
      oldOn, // 旧事件
      add, // 添加事件函数
      remove$$1, //移除事件函数
      createOnceHandler, // 创建仅执行一次的处理函数
      vm // 实例
    ) {
      var name, def$$1, cur, old, event;
      for (name in on) {
        // cur 就是处理方法
        def$$1 = cur = on[name];
        old = oldOn[name];
        // normalizeEvent 是缓存自定义的事件对象的方法，name 将作为事件名
        event = normalizeEvent(name);
        // cur 即 现在的 on[name] 是否为 undefined 或 null, 如果是就警告
        if (isUndef(cur)) {
          warn(
            "Invalid handler for event \"" + (event.name) + "\": got " + String(cur),
            vm
          );
        } else if (isUndef(old)) {
          // 看看 oldOn[name] 是不是 undefined 或 null ，如果是的话
          // 就看看 cur.fns 是不是 undefined 或 null
          if (isUndef(cur.fns)) {
            // 如果是的话，为 cur 和 on[name] 调用一下 createFnInvoker, 返回一个 Invoker()
            cur = on[name] = createFnInvoker(cur, vm);
          }
          // event.once 是否为 true, 即事件是否只调用一次
          if (isTrue(event.once)) {
            // 一次性的处理函数
            cur = on[name] = createOnceHandler(event.name, cur, event.capture);
          }
          // 添加事件
          add(event.name, cur, event.capture, event.passive, event.params);
        } else if (cur !== old) {
          // 如果 cur 和 old 不一样，更新一下
          old.fns = cur;
          on[name] = old;
        }
      }
      // 遍历一下 oldOn
      for (name in oldOn) {
        // on[name] 是否为 undefined 或 null, 是的话就把它移除了
        if (isUndef(on[name])) {
          // 缓存一下 这个事件名
          event = normalizeEvent(name);
          // 移除这个事件
          remove$$1(event.name, oldOn[name], event.capture);
        }
      }
    }
  
    /*  */
    /**
     * def 可能是 data 或 vnode
     * vnode 时 hookKey 为 'insert' 'postpatch'
     * data 时 hookKey 为 'afterLeave' 'afterEnter' 'enterCancelled' 'delayLeave'
     * hook 为回调函数
     */
    function mergeVNodeHook (def, hookKey, hook) {
      if (def instanceof VNode) {
        def = def.data.hook || (def.data.hook = {});
      }
      var invoker;
      var oldHook = def[hookKey];
  
      function wrappedHook () {
        hook.apply(this, arguments);
        // important: remove merged hook to ensure it's called only once
        // and prevent memory leak
        // 重要：删除合并的钩子以确保仅调用一次，并防止内存泄漏
        // 删除 invoker.fns 数组里的 wrappedHook, indexOf 后用 splice 删除
        remove(invoker.fns, wrappedHook);
      }
  
      if (isUndef(oldHook)) {
        // no existing hook
        // 没有现有的钩子, 创建一个 invoker
        invoker = createFnInvoker([wrappedHook]);
      } else {
        /* istanbul ignore if */
        // 如果 oldHook.fns 已定义同时 oldHook.merged 为 true
        if (isDef(oldHook.fns) && isTrue(oldHook.merged)) {
          // already a merged invoker
          // 表示有一个已经合并过的 invoker
          invoker = oldHook;
          // 把包装好的钩子放到这个 invoker 的 fns 数组中
          invoker.fns.push(wrappedHook);
        } else {
          // existing plain hook
          // 存在普通钩子, 那就新建一个 invoker, 把这普通钩子和包装后的钩子都放到新 invoker 的 fns 中
          invoker = createFnInvoker([oldHook, wrappedHook]);
        }
      }
      // 把合并标志改为 true
      invoker.merged = true;
      // 重新给 def[hookKey] 指定对象, 可能是原对象也可能是新建的 invoker(不存在 invoker 时)
      def[hookKey] = invoker;
    }
  
    /*  */
    // 从 VNode 中提取原始属性
    function extractPropsFromVNodeData (
      data,
      Ctor,
      tag
    ) {
      // we are only extracting raw values here.
      // validation and default values are handled in the child
      // component itself.
      // 我们只在这里提取原始值。验证和默认值在子组件本身中处理。
      var propOptions = Ctor.options.props;
      // 如果不存在 props, 直接出去
      if (isUndef(propOptions)) {
        return
      }
      // 存在 props, 开始提取
      var res = {};
      var attrs = data.attrs;
      var props = data.props;
      // 如果 attrs 或 props 定义了
      if (isDef(attrs) || isDef(props)) {
        for (var key in propOptions) {
          // 把驼峰格式变成连字符格式 如 myValue ->  my-value
          var altKey = hyphenate(key);
          {
            var keyInLowerCase = key.toLowerCase();
            if (
              // 如果 key 不是全小写格式，同时存在 attrs[key]
              key !== keyInLowerCase &&
              attrs && hasOwn(attrs, keyInLowerCase)
            ) {
              // 给出 warn, 不要用 驼峰表示组件，要用连字符
              tip(
                "Prop \"" + keyInLowerCase + "\" is passed to component " +
                (formatComponentName(tag || Ctor)) + ", but the declared prop name is" +
                " \"" + key + "\". " +
                "Note that HTML attributes are case-insensitive and camelCased " +
                "props need to use their kebab-case equivalents when using in-DOM " +
                "templates. You should probably use \"" + altKey + "\" instead of \"" + key + "\"."
              );
            }
          }
          checkProp(res, props, key, altKey, true) ||
          checkProp(res, attrs, key, altKey, false);
        }
      }
      return res
    }