@mxydl2009/vue3-renderer v1.1.3

Modules

KeepAlive

定义KeepAlive组件

KeepAlive~KeepAlive

Kind: inner constant of KeepAlive
Title: KeepAlive组件

KeepAlive组件实现

1. 子组件作为slots存在, 是默认的slot
2. 缓存子组件节点: cachevnode.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)
  • ~normalizeStyle(value) ⇒ object

WebAPI~normalizeClass(value)

将class的值归一化为字符串

Kind: inner method of WebAPI

WebAPI~normalizeStyle(value) ⇒ object

归一化style属性值

Kind: inner method of WebAPI
Returns: object - 归一化后的style属性值

diff

定义diff算法

• diff
  • static
    • .diffWithoutKey(n1, n2)
    • .singleEndDiffWithKey()
  • inner
    • ~isReusable(oldNode, newNode) ⇒ boolean

diff.diffWithoutKey(n1, n2)

不使用key来标记节点时的diff算法

核心思想: 因为没有key的帮助，无法识别新旧节点列表中，究竟哪些节点是可以复用的，所以依次按照顺序对比patch

Kind: static method of diff

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 - 新旧节点是否可以复用

renderer

定义入口文件

renderer.createRenderer(renderOptions) ⇒ object

根据传入的平台渲染API，创建一个平台渲染器，不传的话默认是web平台渲染器

Kind: static method of renderer
Returns: object - 渲染器对象

渲染器对象

包含render方法

render(vnode, container);

lifeCycleHooks

定义生命周期方法的添加函数

lifeCycleHooks.setCurrentInstance(instance)

将传入的实例赋值给当前实例，在组件setup函数调用前，将组件实例传入作为当前实例，这样在setup中注册的生命周期函数会添加到组件实例上，setup调用后释放

Kind: static method of lifeCycleHooks

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 ⏏

挂载/更新节点

Kind: Exported function

module.exports~mountElement(vnode, container, anchor, renderOptions) ⇒ undefined

挂载DOM元素类型的节点

Kind: inner method of module.exports

module.exports~patchElement(n1, n2, renderOptions)

更新元素类型的节点

Kind: inner method of module.exports

module.exports~patchChildren(n1, n2, el, renderOptions)

更新新旧节点的子节点

Kind: inner method of module.exports

module.exports~mountComponent(vnode, container, anchor, renderOptions)

组件挂载

Kind: inner method of module.exports

module.exports~patchComponent(n1, n2) ⇒ undefined

更新组件

Kind: inner method of module.exports

module.exports~resolveProps(options, propsData) ⇒ Array

根据组件声明的props，解析实际传入的props值，返回解析后的props和attrs

Kind: inner method of module.exports
Returns: Array - 返回解析后的props和attrs

module.exports~propsHasChanged(prevProps, nextProps) ⇒ boolean

浅层比较prevProps与nextProps

Kind: inner method of module.exports
Returns: boolean - prevProps与nextProps浅层比较的结果

module.exports~shallowReadOnly(data) ⇒ object

浅层冻结数据

Kind: inner method of module.exports

module.exports~getAnchor(vnode) ⇒ DOMNode

获取当前vnode的锚点（insertBefore的anchor锚点）

Kind: inner method of module.exports
Returns: DOMNode - 返回DOMNode类型

unmount

定义卸载方法

module.exports(vnode, renderOptions) ⇒ undefined ⏏

卸载节点（组件）

Kind: Exported function