为什么需要 Virtual Dom？

Virtual Dom？"/>

为什么需要 Virtual Dom？

众所周知，操作 DOM 是很耗费性能的一件事情，既然如此，我们可以考虑通过 JS 对象来模拟 DOM 对象，毕竟操作 JS 对象比操作 DOM 省时的多。

举个例子

// 假设这里模拟一个 ul，其中包含了 5 个 li
;[1, 2, 3, 4, 5][// 这里替换上面的 li(1, 2, 5, 4)
]

从上述例子中，我们一眼就可以看出先前的 ul 中的第三个 li 被移除了，四五替换了位置。

如果以上操作对应到 DOM 中，那么就是以下代码

// 删除第三个 li
ul.childNodes[2].remove()
// 将第四个 li 和第五个交换位置
let fromNode = ul.childNodes[4]
let toNode = node.childNodes[3]
let cloneFromNode = fromNode.cloneNode(true)
let cloenToNode = toNode.cloneNode(true)
ul.replaceChild(cloneFromNode, toNode)
ul.replaceChild(cloenToNode, fromNode)

当然在实际操作中，我们还需要给每个节点一个标识，作为判断是同一个节点的依据。所以这也是 Vue 和 React 中官方推荐列表里的节点使用唯一的 key 来保证性能。

那么既然 DOM 对象可以通过 JS 对象来模拟，反之也可以通过 JS 对象来渲染出对应的 DOM

以下是一个 JS 对象模拟 DOM 对象的简单实现

export default class Element {/*** @param {String} tag 'div'* @param {Object} props { class: 'item' }* @param {Array} children [ Element1, 'text']* @param {String} key option*/constructor(tag, props, children, key) {this.tag = tagthis.props = propsif (Array.isArray(children)) {this.children = children} else if (isString(children)) {this.key = childrenthis.children = null}if (key) this.key = key}// 渲染render() {let root = this._createElement(this.tag,this.props,this.children,this.key)document.body.appendChild(root)return root}create() {return this._createElement(this.tag, this.props, this.children, this.key)}// 创建节点_createElement(tag, props, child, key) {// 通过 tag 创建节点let el = document.createElement(tag)// 设置节点属性for (const key in props) {if (props.hasOwnProperty(key)) {const value = props[key]el.setAttribute(key, value)}}if (key) {el.setAttribute('key', key)}// 递归添加子节点if (child) {child.forEach(element => {let childif (element instanceof Element) {child = this._createElement(element.tag,element.props,element.children,element.key)} else {child = document.createTextNode(element)}el.appendChild(child)})}return el}
}