史上最全的vue.js源码解析（三）

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

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

1.children 的规范化：normalizeArrayChildren
2.组件实例化：initInjections
3.slot插槽函数：resolveSlots，normalizeScopedSlots，normalizeScopedSlot，proxyNormalSlot，renderSlot
4.Vue 的各类渲染方法–辅助函数：
markOnce;// 标记v-once
toNumber;// 转换成Number类型
toString;//转换成字符串
renderList;//生成列表VNode
renderSlot;//生成解析slot节点
looseEqual;
looseIndexOf;
renderStatic;//生成静态元素
resolveFilter;// 获取过滤器
checkKeyCodes;//检查键盘事件keycode
bindObjectProps;//绑定对象属性
createTextVNode;//创建文本VNod
createEmptyVNode;//创建空节点VNode
resolveScopedSlots;//获取作用域插槽
bindObjectListeners;//处理v-on=’{}'到vnode data上
bindDynamicKeys;//处理动态属性名
prependModifier;//处理修饰符

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

1.vue的事件机制
①.监听事件：$on

②.监听事件，只监听1次：$once

③.移除自定义事件监听器：$off

④.触发事件: $emit

2.函数式组件的实现
createFunctionalComponent
3.组件的渲染和更新过程
componentVNodeHooks
在组件初始化的时候实现init、prepatch、insert、destroy钩子函数

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

 //children 的规范化，simpleNormalizeChildren和normalizeChildren都是用来把children由树状结构变成一维数组
  // 模板编译器试图通过在编译时静态分析模板来最小化规范化的需要
  // 对于纯HTML标记，可以完全跳过规范化，因为生成的呈现函数保证返回Array。有两种情况需要额外的规范化：
  // 当子级包含组件时-因为功能组件可能返回数组而不是单个根。在这种情况下，只需要一个简单的规范化—如果任何子对象是数组，
  // 我们就用Array.prototype.concat将整个对象展平。它保证只有1级深度，因为功能组件已经规范化了它们自己的子级
  function simpleNormalizeChildren (children) {
    for (var i = 0; i < children.length; i++) {
      if (Array.isArray(children[i])) {
        return Array.prototype.concat.apply([], children)
      }
    }
    return children
  }

  // 2.当子级包含总是生成嵌套数组的构造时，例如