GitHub - mxydl2009/vue3-renderer: 模拟Vue3的渲染器，自定义渲染器逻辑，学习Vue的核心思路

Modules

KeepAlive: 定义KeepAlive组件
WebAPI: 定义渲染器平台的API集合
diff: 定义diff算法
renderer: 定义入口文件
lifeCycleHooks: 定义生命周期方法的添加函数
patch: 定义核心的patch方法
unmount: 定义卸载方法

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)
- ~normalizeStyle(value) ⇒ object

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
  - .diffWithoutKey(n1, n2)
  - .singleEndDiffWithKey()
- 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` ⏏

挂载/更新节点

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	`*`

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
src		src
todo		todo
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
eslint.config.mjs		eslint.config.mjs
index.html		index.html
jsdocConfig.json		jsdocConfig.json
package-lock.json		package-lock.json
package.json		package.json
rollup.config.mjs		rollup.config.mjs

mxydl2009/vue3-renderer

Folders and files

Latest commit

History

Repository files navigation

Modules

KeepAlive

KeepAlive~KeepAlive

KeepAlive组件实现

WebAPI

WebAPI~normalizeClass(value)

WebAPI~normalizeStyle(value) ⇒ object

diff

diff.diffWithoutKey(n1, n2)

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

diff.singleEndDiffWithKey()

使用key标记节点时的单端diff算法

diff~isReusable(oldNode, newNode) ⇒ boolean

renderer

renderer.createRenderer(renderOptions) ⇒ object

渲染器对象

lifeCycleHooks

lifeCycleHooks.setCurrentInstance(instance)

patch

module.exports(n1, n2, container, anchor, renderOptions) ⇒ undefined ⏏

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

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

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

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

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

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

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

module.exports~shallowReadOnly(data) ⇒ object

module.exports~getAnchor(vnode) ⇒ DOMNode

unmount

module.exports(vnode, renderOptions) ⇒ undefined ⏏

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

WebAPI~normalizeStyle(value) ⇒ `object`

diff~isReusable(oldNode, newNode) ⇒ `boolean`

renderer.createRenderer(renderOptions) ⇒ `object`

module.exports(n1, n2, container, anchor, renderOptions) ⇒ `undefined` ⏏

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

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

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

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

module.exports~shallowReadOnly(data) ⇒ `object`

module.exports~getAnchor(vnode) ⇒ `DOMNode`

module.exports(vnode, renderOptions) ⇒ `undefined` ⏏

Packages