vue2源码解析 ​

(function (global, factory) {
  // nodejs的模块化开发，exports和module.exports是否存在，也就是commonjs规范。
  // 存在的话，导出工厂函数module.exports = factory()
  // 不存在的话，判断define是否存在，define是js(AMD规范，异步模块定义)中一个特殊的函数，用来定义模块
  /* 
    define(function() { return { name: 'js', age: '3' } }); 
    在上面的示例中,我们使用define函数来创建了一个模块,
    这个模块包含了一个返回对象的函数。
  */
  // define(factory) 
  // 以上两个都是ES Module诞生之前，对于模块化定义的规范。

  // 如果以上两个规范都不满足，则给Window添加Vue属性，属性值为工厂函数。
  // global.Vue = factory()
  // 因此可以直接使用Vue.xxx方法。
  // new Vue 就是 new factory();
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
    (global.Vue = factory());
}(this, (function () {...}

/**
   * Convert a value to a string that is actually rendered.
   * 定义一个_toSting 方法
   * 返回值:
   *  val是null 返回 ''
   *  val是引用类型的 返回 JSON.stringify(val,null,2)的结果
   *    将引用类型的属性系列化为JSON格式,同时缩进2个空格.
   *     JSON.stringify(value, replacer, space) 序列化为JSON格式.
   *      value: 将要序列化成 一个 JSON 字符串的值。
   *      replacer: 
   *            如果传入null或不提供,所有属性都系列化
   *            如果传入函数,序列化时每个属性都经过函数处理
   *            如果传入数组,序列化时属性包含在数组中才处理
   *              
   *     space: 指定输出后的缩进,用于美化输出, 格式更规范.
   *            如果没有传入或null, 默认没有空格.
   *            如果传入数字(1-10), 代表空格的数量来"缩进". 小于1则没有空格.
   *            如果传入字符串, 代表前10个字母占据"缩进"的位置.             
   *  val不是引用类型的, 返回String转换后的字符串.
   */
function _toString(val) {
  return val == null
    ? ''
    : typeof val === 'object'
      ? JSON.stringify(val, null, 2)
      : String(val)
}

/**
   * Convert a input value to a number for persistence.
   * If the conversion fails, return original string.
   * 定义一个toNumber方法, 
   * 用于转换为数字类型,如果转换失败,返回原值.
   *    使用parseFloat方法,转换为浮点数字类型.
   *       parseFloat(val)  只能接收一个参数, 第二个参数无效.
   *       目前对于parseInt()方法, 第二个参数才表示进制.
   * 
   * 
   * 最新版Vue3源码已经修改为
   * const looseToNumber = (val) => {
   *    const n = parseFloat(val);
   *    return isNaN(n) ? val : n;
   *    //利用isNaN判断是否转换失败,失败就直接返回原值.  
   *  };
   */
function toNumber(val) {
  var n = parseFloat(val, 10)
  return (n || n === 0) ? n : val
}

/**
   * Make a map and return a function for checking if a key
   * is in that map.
   * 定义一个makeMap方法, 用于返回一个用于判断(是否在源字符串中)的函数, 
   * 该函数传参个字符后, 可以判断参数是否在源字符串中.
   * (支持转小写再判断)
   * 用法: 
   * makeMap('a,b,c,d',true).('A') === makeMap('a,b,c,d').('a') === true
   * str为字符串格式,用于判断的源字符串
   * expectsLowerCase 为布尔格式 (true,false),用于是否要切换小写再判断.
   */
  function makeMap(
    str,
    expectsLowerCase
  ) {
    var map = Object.create(null)
    // 创建一个变量名为map的对象, map的__proto__指向null,
    // 也就是创建一个纯净的空对象,没有继承任何东西
    // 防止继承了别的键名,导致判断的时候出现bug.
    var list = str.split(',')
    // 将str以"逗号"分割为一个数组
    for (var i = 0; i < list.length; i++) {
      map[list[i]] = true
      // 给map添加键名为list项,键值为true的键值对.
      // 全部添加上.
    }
    // 是否有期望转小写
    // 如果期望,则返回一个匿名函数, 函数的返回值是
    // map[val.toLowerCase()] 也就是返回的函数, 
    // 调用后,传参一个字符, 可以用于该字符判断是否在map中.
    // 例如: makeMap('a,b,c,d',true).('a')
    return expectsLowerCase
      ? function (val) { return map[val.toLowerCase()]; }
      : function (val) { return map[val]; }
    /* 为何不用 in 关键字判断? ES6 ---- 2015年出的 */
  }

  /**
   * Check if a tag is a built-in tag.
   * vue2官方用来举例的方法.
   * 用它可以创建了一个字符(标签)用于判断是否为源字符串的方法(自己规定的内置标签).
   * 传入大量vue2自己的内置标签.
   */
  var isBuiltInTag = makeMap('slot,component', true)
  // isBuiltInTag('slot') ==== true

  // vue3中依然保留了这个函数，返回时更加严谨, 加!!双重转换为布尔值。
  function makeMap(str, expectsLowerCase) {
      const map = Object.create(null);
      const list = str.split(',');
      for (let i = 0; i < list.length; i++) {
          map[list[i]] = true;
      }
      return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];
  }

/**
   * Remove an item from an array
   * 移除一个数组规定项的方法,影响原数组. remove$1
   * arr: 目标数组
   * item: 规定项
   */
  function remove$1(arr, item) {
    // 排除空数组
    if (arr.length) {
      var index = arr.indexOf(item)
      if (index > -1) {
        // 找到该项,返回截取后的源数组.(splice影响原数组)
        return arr.splice(index, 1)
      }
    }
  }

/**
 * Check whether the object has the property.
 * 判断key是否为obj的私有属性.
 * hasOwnProperty.call(obj, key),
 *   调用 Object.prototype.hasOwnProperty(key) 
 *   利用call改变this, 也就是调用的Object的原型对象上的方法, this指回自己.
 *   并不等价于 obj.hasOwnProperty(key); 
 *   一个是共享方法(不易被修改),一个是私有属性.
 * 这样转弯写?? 
 *   目的是防止: 后面修改了或者已经定义了obj自己的hasOwnProperty方法.
 */
var hasOwnProperty = Object.prototype.hasOwnProperty
function hasOwn(obj, key) {
  return hasOwnProperty.call(obj, key)
}

/**
 * Check if value is primitive
 * 检查值是否为原始简单类型。(string和number)
 */
function isPrimitive(value) {
  return typeof value === 'string' || typeof value === 'number'
}

/**
   * Create a cached version of a pure function.
   * 创建一个缓存版本使用纯函数方法(实际是利用对象的键值对)。
   * 缓存回调函数的结果.
   */
  function cached(fn) {
    var cache = Object.create(null)
    // 创建一个纯净的对象cache
    // 返回一个函数，用于调用回调函数(回调函数中可以定义一个字符串作为形参)，
    // 该返回的函数来接收实参
    // 并且根据判断，存入对象cache作为缓存。
    // (该字符串作为键名，函数调用的结果作为键值。)
    // 再次调用时,如果对象内有该值,就返回该值.
    return function cachedFn(str) {
      var hit = cache[str]
      // 传入一个字符串，判断对象（cache）里有没有，
      // 如果没有则调用回调函数，
      // 把结果作为键值保存在cache对象里面。键名就是传入的字符串。
      // 返回键值.cache[str]
      // 如果有则返回键值.
      return hit || (cache[str] = fn(str))
    }
  }

  // 简单的使用
  // var cacheObj = cached(function (str) {
  //   return str+'wc'
  // });
  // console.log(cacheObj('name'));
  // 这样的话, 第一次调用会返回 (cache[str] = fn(str)) 的结果,
  // 也就是cache[str] 'namewc'
  // 用变量接收形式调用也可以
  // var cFn = cached(function (str) {
  //   return str+'wc'
  // });
  // cFn('name');  //返回'namewc'
  // 第二次调用时
  // 对象(缓存)里面有，就直接返回'namewc',
  // 而不用执行函数了。

/**
* Camelize a hyphen-delmited string.
* 将连字符形字符串转为驼峰命名Camellize。
* name-wc ---> nameWc   (-w 转为W)
*/
// 正则表达式 \w:表示 [0-9a-zA-Z_] 任何单词字符。
// 全局匹配 -后面的[0-9a-zA-Z_] 的字符，也就是-1或者-a 这样的1和a
var camelizeRE = /-(\w)/g
var camelize = cached(function (str) {
// replace(old,new/fn); 第二个参数传入函数，处理完以后再返回作为替换文本
// replace(pattern, replacement)
// replacement：接收字符串或函数，
    // 如果是字符串: 替换对应的字符串
    // 特殊替换模式：如果是$n, 则$表示正则匹配的次数，
	    // 插入第 n（索引从 1 开始）个捕获组(n<100)
    // 如果是函数: 将为每个匹配调用该函数，并将其返回值用作替换文本。
  	// 函数形参(match, p1, p2, …, pN, 等等)

/* 'abc'.replace('a', function(_,a){
      return a+'1';
    });
    //a1bc
    'abc'.replace('a', function(match,a){
      return a+'1';
    });
    //a1bc
*/
// 匹配'-a'，符合的处理一遍，转为大写(A)作为new，再替换。
// _表示匹配的子字符串，
return str.replace(camelizeRE, 
	function (_, c) { return c ? c.toUpperCase() : ''; })
})

/**
* Capitalize a string.
* 把一个字符转换为首字母大写。
* 取第1个转大写，其余截出来，拼接即可。
*/
var capitalize = cached(function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
})

/**
   * Hyphenate a camelCase string.
   * 匹配A-Z的字符，或者A-Z字符前一个别的字符，如A和sA
   * 测试正则的功能：string.match() 
   * 'AdsBaArA'.match(/([^-])([A-Z])/g); 返回['sB', 'aA', 'rA']
   * $1-$2 表示匹配组，-表示连字符，也就是匹配组之间加-
   * BdsaAdsCadsadas ----> 转为 bdsa-ads-cadsadas
   * 没有看懂为何要加两层replace.
   */
var hyphenateRE = /([^-])([A-Z])/g
var hyphenate = cached(function (str) {
  // replace中，第二个参数为字符串的特殊情况，$n
  // $1-$2表示匹配的1组和2组之间，插入-
  return str
    .replace(hyphenateRE, '$1-$2')
    .replace(hyphenateRE, '$1-$2')
    .toLowerCase()
})

/**
* Simple bind, faster than native
* 更简单的bind，比原生更快. 函数的形式调用, 并且能达到call/apply的效果。
* 兼容了老版本浏览器不支持原生的bind函数。
* 用法：bind$1(fn, targetObj)(1,2,3)
* 如果传的参数多于1个，调用fn.apply(ctx, arguments)
* 如果传的参数只有1个，调用fn.call(ctx, a)
* 如果没有传参数，调用fn.call(ctx)
*/
function bind$1(fn, ctx) {
  function boundFn(a) {
    var l = arguments.length
    return l
      ? l > 1
        ? fn.apply(ctx, arguments)
        : fn.call(ctx, a)
      : fn.call(ctx)
  }
  // record original fn length
  // 保存一下原始函数的length属性。
  boundFn._length = fn.length
  return boundFn
}

/** 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)
  // 创建一个i长度的空数组
  while (i--) {
    // 循环往数组里追加内容。
    // 从最大索引(i+start) 一路加到start
    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
}

/*
  * Quick object check - this is primarily used to tell
  * Objects from primitive values when we know the value
  * is a JSON-compliant type.
*/
function isObject(obj) {
  return obj !== null && typeof obj === 'object'
}

/*
  * Strict object type check. Only returns true
  * for plain JavaScript objects.
*/
var toString = Object.prototype.toString
var OBJECT_STRING = '[object Object]'
function isPlainObject(obj) {
  // 使用toString方法，检测对象经过toString后，是否为'[object Object]'
  // 由于借用了Object.prototype.toString, 所以要用call改变this.
  return toString.call(obj) === OBJECT_STRING
}

/* 
甚至在vue3中，依旧借用了这个方法，
但是没有将变量(OBJECT_STRING)暴露在全局中。
*/
const isPlainObject = (val) => toTypeString(val) === '[object Object]';
/** vue3自己封装了toTypeString方法
 * (目的是为了避免和toString重名)
 * （底层如下： 还是用toString）。
**/
const objectToString = Object.prototype.toString;
const toTypeString = (value) => objectToString.call(value);

/** Merge an Array of Objects into a single Object. **/
function toObject(arr) {
    var res = {}
    for (var i = 0; i < arr.length; i++) {
      if (arr[i]) {
        extend(res, arr[i])
      }
    }
    return res
  }

function noop() { }
// 489行，给config对象的getTagNamespace赋值为空函数。
{
  getTagNamespace: noop
}

/* Always return false. */
var no = function () { return false; }

/* Generate a static keys string from compiler modules. */
function genStaticKeys(modules) {
  return modules.reduce(function (keys, m) {
    return keys.concat(m.staticKeys || [])
  }, []).join(',')
}

function looseEqual(a, b) {
  /* eslint-disable eqeqeq */
  /* JSON.stringify({name: '123'}) === JSON.stringify({name: '123'});  返回true */
  return a == b || (
    isObject(a) && isObject(b)
      ? JSON.stringify(a) === JSON.stringify(b)
      : false
  )
  /* eslint-enable eqeqeq */
}
/*
  测试使用: console.log(looseEqual({name: '123'}, {name: '123'}))
*/

function looseIndexOf(arr, val) {
  for (var i = 0; i < arr.length; i++) {
    if (looseEqual(arr[i], val)) { return i }
  }
  return -1
}

function isReserved(str) {
  var c = (str + '').charCodeAt(0)
  return c === 0x24 || c === 0x5F
}

function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

// Parse simple path.
/*
* 如果不含`.`, 直接返回
* 如果含有，则返回一个函数(支持传对象)，用于遍历,直到取出最终的值。
* 函数内根据`.`分割为数组，遍历数组，逐级获取传入对象的值，
* 直到最深层(最后项的值)
*/
var bailRE = /[^\w\.\$]/
function parsePath(path) {
  if (bailRE.test(path)) {
    return
  } else {
    var segments = path.split('.')
    // ['\dsadas\dasdas']
    // 假设obj 传入{}
    // obj = obj[segments[i]]
    // obj = undefined
    return function (obj) {
      for (var i = 0; i < segments.length; i++) {
        if (!obj) { return }
        obj = obj[segments[i]]
      }
      return obj
    }
  }
}

/*
* 测试使用
* parsePath('a.b.c')({a:{b:{c:'value'}}})
* 可以返回c的属性值'value'
* 如果属性c的值变为'name'
* parsePath('a.b.c')({a:{b:{c:'name'}}})
* 可以立即拿到值'name'。
*/

// 一点点Watcher的源码
if (typeof expOrFn === 'function') {
  this.getter = expOrFn
} 
else {
  this.getter = parsePath(expOrFn)
  if (!this.getter) {
    ...
  }
}

/* istanbul ignore next */
  function isNative(Ctor) {
    return /native code/.test(Ctor.toString())
  }
  // Array.toString()
  // 'function Array() { [native code] }'

Vue.nextTick( [callback, context] )
/*
  {Function} [callback]
  {Object} [context]
  在下次 DOM 更新循环结束之后执行延迟回调。
*/
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 由于借用了promise.then(), 因此后面推入的任务都是在所有任务执行完才执行.   
// 也就是Vue.nextTick()函数的作用原理.

// nextTick立即执行函数里面，设计的就像一个微任务队列一样。
// 有数组保存任务队列，
// 有标识符pending表示当前是否正在执行任务，
// 有清空任务的函数nextTickHandler
// 有借用promise.then,实现异步执行.
var nextTick = (function () {
  var callbacks = []
  // 回调函数组成的数组
  var pending = false
  // 设置一个标识符用于表示是否等待
  var timerFunc
  // 定义一个时间函数。

  // 用来清空callbacks任务队列的函数。
  function nextTickHandler() {
    // 定义pending为不等待
    pending = false
    // 将所有回调函数（任务）截取出来。
    var copies = callbacks.slice(0)
    // 清空原来用于保存回调函数的数组
    callbacks.length = 0
    // 循环遍历执行所有的回调函数。(也就是清空任务)
    for (var i = 0; i < copies.length; i++) {
      copies[i]()
    }
  }

  if (typeof Promise !== 'undefined' && isNative(Promise)) {
        // 如果可以使用Promise
        var p = Promise.resolve()
        // 创建一个成功的promise对象p
        timerFunc = function () {
          // 产生微任务队列 执行 nextTickHandler
          // 也就是使用promise.then来清空事件。(异步)
          p.then(nextTickHandler)
          if (isIOS) { setTimeout(noop) }
        }
  }
    // 最终返回一个函数queueNextTick，接收cb和ctx
    // 创建一个变量func，表示单个回调函数(单个任务)
    // 如果传了ctx,则创建一个函数包裹，
    // 包裹里面执行让this指向ctx，
    // 没传则依旧是cb
    // 然后把该任务推入callbacks任务队列里面。
    return function queueNextTick(cb, ctx) {
      var func = ctx
        ? function () { cb.call(ctx) }
        : cb
      callbacks.push(func)
      // 如果pendding为false,
      // 改为true, 同时调用nextTickHandler，清空任务。
      if (!pending) {
        pending = true
        timerFunc(nextTickHandler, 0)
      }
    }
})()

// the nextTick behavior leverages the microtask queue, 
// which can be accessed 
// via either native Promise.then

var hasProto = '__proto__' in {}

var inBrowser = typeof window !== 'undefined' &&
    Object.prototype.toString.call(window) !== '[object Object]'

// 判断环境
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
var isIOS = UA && /iphone|ipad|ipod|ios/.test(UA)

var devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__