@mxydl2009/vue3-renderer
v1.1.3
Published
simulate vue3 renderer for learning
Downloads
18
Readme
Modules
KeepAlive
定义KeepAlive组件
KeepAlive~KeepAlive
Kind: inner constant of KeepAlive
Title: KeepAlive组件
KeepAlive组件实现
- 子组件作为slots存在, 是默认的slot
- 缓存子组件节点: cache[vnode.type] = vnode; 使用组件选项对象作为key来缓存,但这种方式只能支持不同组件类型, 同一组件类型无法缓存多个实例,如下例所示
<KeepAlive>
<count v-if="true" />
<count else />
</KeepAlive>
Vue中除了用选项对象来作为key,还使用了vnode.key, 源码key = vnode.key == null ? comp : vnode.key
;
像上述例子,编译器会自动给每个count添加key,而且是从0开始递增的key,除非手动添加key标识
WebAPI
定义渲染器平台的API集合
WebAPI~normalizeClass(value)
将class的值归一化为字符串
Kind: inner method of WebAPI
| Param | Type | Description | | --- | --- | --- | | value | string | object | Array.<(string|object)> | class属性值 A@returns {string} 归一化后的字符串值 |
WebAPI~normalizeStyle(value) ⇒ object
归一化style属性值
Kind: inner method of WebAPI
Returns: object - 归一化后的style属性值
| Param | Type | Description | | --- | --- | --- | | value | Array.<object> | object | 配置的style属性值 |
diff
定义diff算法
- diff
- static
- inner
- ~isReusable(oldNode, newNode) ⇒ boolean
diff.diffWithoutKey(n1, n2)
不使用key来标记节点时的diff算法
核心思想: 因为没有key的帮助,无法识别新旧节点列表中,究竟哪些节点是可以复用的,所以依次按照顺序对比patch
Kind: static method of diff
| Param | Type | Description | | --- | --- | --- | | n1 | * | 旧的父节点 | | n2 | * | 新的父节点 |
diff.singleEndDiffWithKey()
使用key标记节点时的单端diff算法
核心思想: 通过key可以在新旧子节点列表中,找到可以复用的节点,从而不必卸载和挂载,通过移动可复用节点即可
Kind: static method of diff
diff~isReusable(oldNode, newNode) ⇒ boolean
根据key值和node.type来判断两个节点是否可以复用
Kind: inner method of diff
Returns: boolean - 新旧节点是否可以复用
| Param | Type | Description | | --- | --- | --- | | oldNode | * | 旧节点 | | newNode | * | 新节点 |
renderer
定义入口文件
renderer.createRenderer(renderOptions) ⇒ object
根据传入的平台渲染API,创建一个平台渲染器,不传的话默认是web平台渲染器
Kind: static method of renderer
Returns: object - 渲染器对象
渲染器对象
包含render方法
render(vnode, container);
| Param | Type | Description | | --- | --- | --- | | renderOptions | object | 平台渲染的API集合 |
lifeCycleHooks
定义生命周期方法的添加函数
lifeCycleHooks.setCurrentInstance(instance)
将传入的实例赋值给当前实例,在组件setup函数调用前,将组件实例传入作为当前实例,这样在setup中注册的生命周期函数会添加到组件实例上,setup调用后释放
Kind: static method of lifeCycleHooks
| Param | Type | | --- | --- | | instance | * |
patch
定义核心的patch方法
- patch
- module.exports(n1, n2, container, anchor, renderOptions) ⇒ undefined ⏏
- ~mountElement(vnode, container, anchor, renderOptions) ⇒ undefined
- ~patchElement(n1, n2, renderOptions)
- ~patchChildren(n1, n2, el, renderOptions)
- ~mountComponent(vnode, container, anchor, renderOptions)
- ~patchComponent(n1, n2) ⇒ undefined
- ~resolveProps(options, propsData) ⇒ Array
- ~propsHasChanged(prevProps, nextProps) ⇒ boolean
- ~shallowReadOnly(data) ⇒ object
- ~getAnchor(vnode) ⇒ DOMNode
- module.exports(n1, n2, container, anchor, renderOptions) ⇒ undefined ⏏
module.exports(n1, n2, container, anchor, renderOptions) ⇒ undefined ⏏
挂载/更新节点
Kind: Exported function
| Param | Type | Description | | --- | --- | --- | | n1 | * | 旧节点 | | n2 | * | 新节点 | | container | * | 容器 | | anchor | * | 挂载锚点 | | renderOptions | * | 渲染器平台API集合 |
module.exports~mountElement(vnode, container, anchor, renderOptions) ⇒ undefined
挂载DOM元素类型的节点
Kind: inner method of module.exports
| Param | Type | Description | | --- | --- | --- | | vnode | * | 节点 | | container | * | 容器 | | anchor | * | 锚点 | | renderOptions | * | 渲染器平台 |
module.exports~patchElement(n1, n2, renderOptions)
更新元素类型的节点
Kind: inner method of module.exports
| Param | Type | Description | | --- | --- | --- | | n1 | * | 旧节点 | | n2 | * | 新节点 | | renderOptions | * | 渲染器API |
module.exports~patchChildren(n1, n2, el, renderOptions)
更新新旧节点的子节点
Kind: inner method of module.exports
| Param | Type | Description | | --- | --- | --- | | n1 | * | 旧节点 | | n2 | * | 新节点 | | el | * | 容器 | | renderOptions | * | 渲染器API |
module.exports~mountComponent(vnode, container, anchor, renderOptions)
组件挂载
Kind: inner method of module.exports
| Param | Type | Description | | --- | --- | --- | | vnode | * | 组件节点 | | container | * | 容器 | | anchor | * | 锚点 | | renderOptions | * | 渲染器API |
module.exports~patchComponent(n1, n2) ⇒ undefined
更新组件
Kind: inner method of module.exports
| Param | Type | Description | | --- | --- | --- | | n1 | * | 新节点 | | n2 | * | 旧节点 |
module.exports~resolveProps(options, propsData) ⇒ Array
根据组件声明的props,解析实际传入的props值,返回解析后的props和attrs
Kind: inner method of module.exports
Returns: Array - 返回解析后的props和attrs
| Param | Type | Description | | --- | --- | --- | | options | object | 组件的选项对象声明的props | | propsData | object | 实际传入的props |
module.exports~propsHasChanged(prevProps, nextProps) ⇒ boolean
浅层比较prevProps与nextProps
Kind: inner method of module.exports
Returns: boolean - prevProps与nextProps浅层比较的结果
| Param | Type | | --- | --- | | prevProps | object | | nextProps | object |
module.exports~shallowReadOnly(data) ⇒ object
浅层冻结数据
Kind: inner method of module.exports
| Param | Type | | --- | --- | | data | object |
module.exports~getAnchor(vnode) ⇒ DOMNode
获取当前vnode的锚点(insertBefore的anchor锚点)
Kind: inner method of module.exports
Returns: DOMNode - 返回DOMNode类型
| Param | Type | | --- | --- | | vnode | * |
unmount
定义卸载方法
module.exports(vnode, renderOptions) ⇒ undefined ⏏
卸载节点(组件)
Kind: Exported function
| Param | Type | | --- | --- | | vnode | * | | renderOptions | * |