组件

全局组件

1. 通过 Vue.component 注册，存储于 Vue.$options.components 中
2. 再通过合并配置，加入子 Vue 构造函数 Sub $options.components 中，组件名重复，则组件替换全局

组件内组件

直接放置于 components，也就是 $options.components

获取组件

获取组件时机在 render —> createElement（h）时获取，通过 vm.$options.components[tag] 获取，其中还包含名称的学序列化

异步组件

Vue 构造异步组件有三种形式

1. function(resolve,reject)=>{}
2. ()=>import 形式
3. 配置形式

异步组件构造步骤

1. Vue.component 不在返回对象，而是返回工厂函数
2. 在 render —> createElement —> createComponent 时，对异步组件进行了处理 resolveAsyncComponent
3. 返回 createAsyncPlaceholder，先创建一个空节点顶着，等着异步函数执行完毕

resolveAsyncComponent 有两个重要方法

1. resolve：当 resolve 执行时

• 创建子构造函数
• 执行 forceRender —> $forceUpdate

2. reject

• 错误状态
• 执行 forceRender —> $forceUpdate

VNode、Virtual

1. 可维护性
2. 跨平台性
3. 保持最低性能

缺点

1. 对于简单应用，弊大于利
2. 无法对特殊场景进行极致优化

Keep Alive

Vue 内置组件，可以缓存 Vue 组件

1. 抽象组件，判断父子节点时可以忽略
2. 使用 cache 存储缓存，使用 keys + LRU 算法维持最大缓存

首次渲染时，和普通渲染并无区别，除了 keep-alive 组件内增加了个缓存

当进行更新时

keep-alive 执行更新 patchVNode —> prepatch 钩子函数 —> updateChildComponent

vm.$slots = resolveSlots(renderChildren, parentVnode.context); // 解决 slots
vm.$forceUpdate(); // 并促使 keep-alive 重新执行 render 方法

当 keep-alive 重新执行 render 时，会查看当前组件是否存在缓存，如果存在缓存则使用缓存

render —> update —> patch —> createComponent

• 由于 keepAlive 判断条件，则直接进入 prepatch 钩子，再去调用 updateChildComponent
• 由于 keepAlive 判断条件，进入 new Ctor().$mount(undefined)

插槽

slots 和 scopeSlots

1. slots 无法从子组件传值；scopeSlots 可以传值
2. 编译后的值不同 slots 为 vm._t($name)；scopeSlots 编译为 vm._t($name,null,{ $var })
3. slots 赋值阶段存在于 initRender；scopeSlots 虽然初始化在 initRender，但是只是空值，赋值阶段于 rende

slots 和 scopeSlots 存储位置不同，在 v2.6 前，slots 存储于 $slots 中，scopeSlots 存储于$scopeSlots 中，但 v2.6 后，在 renderSlot 中统一先向 $scopeSlots 取值，未取到再去$slots 中取