Vue.js设计与实现学习总结(第三章) 组件渲染原理虚拟DOM

渲染器

---

虚拟DOM: 使用Javascript对象描述真实的 DOM 结构. 例如:

const vNode = {

// 标签名tag: 'div',

// 标签属性prop: {

onClick () {

alert('点击')

}

},

// 子节点children: [

{

tag: 'span',

children: 'hello world'

}

]

}

使用渲染器将虚拟 DOM 变成真实 DOM 并渲染到浏览器页面中, 并寻找并且只更新变化的内容, 如图1:

因此需要编写一个渲染器, 将上面的虚拟 DOM 渲染为真实 DOM:

functionRender(vNode, root) {

// 使用 vNode.tag 作为标签名创建 DOM 对象const el = document.createElement(vNode.tag)

// 遍历 vNode.props 将属性, 事件添加到 DOM 对象for (const key in vNode.props) {

if (/^on/.test(key)) {

// 如果 key 以 on 卡头, 说明它是个事件, 注册相应事件

el.addEventListener(key.substr(2).toLocaleLowerCase(), vNode.props[key])

}

}

// 处理 childrenif (typeof vNode.children == 'string') {

// 为字符串说明它是元素的文本子节点let text = document.createTextNode(vNode.children)

el.appendChild(text)

} elseif (Array.isArray(vNode.children)) {

// 递归调用 Render 函数渲染子节点, 使用当前元素 el 作为挂载点for (let item of vNode.children) {

Render(item, el)

}

}

// 元素添加到挂载点下

root.appendChild(el)

}

渲染器 Render 实现思路, 总体为三步:

1. 创建元素: 把 vNode.tag 作为标签名创建 DOM 元素

2. 为元素添加属性和事件: 遍历 vNode.props 对象, 如果 key 以 on 字符开头, 说明它是一个事件, 把字符 on 截取后再调用 addEventListener 绑定事件处理函数

3. 处理 children: 如果 children 是一个数组, 就用递归调动 Render 继续渲染, 注意此时要把刚刚创建的元素作为挂载点(父节点); 如果 children 是字符串, 则使用 createTextNode 函数创建一个文本节点, 并将其添加到新创建的元素内

组件

组件本质就是一组 DOM 元素的封装, 可以定义一个函数代表组件(也可以使用对象, 该对象添加一个函数返回值为虚拟 DOM 即可), 函数的返回值是组件要渲染的内容

constMyComponent = function () {

return {

tag: 'div',

props: {

onClick: () =>alert('组件')

},

children: 'click me'

}

}

因此就可以使用虚拟 DOM 描述组件:

const vNode = {

tag: MyComponent

}

因此在渲染器渲染时就需要判断 tag 的类型:

functionRender (vNode, container) {

if (typeof vNode.tag === 'string') {

// 说明 vNode 描述的是标签元素mountElement(vNode, container)

} elseif (typeof vNode.tag === 'function') {

// 说明 vNode 描述的是组件mountComponent(vNode, container)

}

}

若为字符串就可以使用 mountElement 函数进行渲染, 内容与上文的 Render 函数一样

functionmountElement(vNode, root) {

// 使用 vNode.tag 作为标签名创建 DOM 对象const el = document.createElement(vNode.tag)

// 遍历 vNode.props 将属性, 事件添加到 DOM 对象for (const key in vNode.props) {

if (/^on/.test(key)) {

// 如果 key 以 on 卡头, 说明它是个事件, 注册相应事件

el.addEventListener(key.substr(2).toLocaleLowerCase(), vNode.props[key])

}

}

// 处理 childrenif (typeof vNode.children == 'string') {

// 为字符串说明它是元素的文本子节点let text = document.createTextNode(vNode.children)

el.appendChild(text)

} elseif (Array.isArray(vNode.children)) {

// 递归调用 Render 函数渲染子节点, 使用当前元素 el 作为挂载点for (let item of vNode.children) {

// 进行递归时, 依然需要判断 tag 的类型, 因此是调用 RenderRender(item, el)

}

}

// 元素添加到挂载点下

root.appendChild(el)

}

若为函数则使用 mountComponent 函数渲染:

functionmountComponent (vNode, container) {

// 调用组件函数, 获取组件要渲染的内容(虚拟DOM)const subtree = vNode.tag()

// 递归调用 Render 渲染 subtrssRender(subtree, container)

}