两种方法实现vue的虚拟DOM
2021-08-02 本文已影响0人
瓯海
虚拟DOM的优势
- 首先是可以对真实的元素节点进行抽象，抽象成VNode（虚拟节点），这样方便后续对其进行各种操作
- 因为对于直接操作DOM来说是有很多的限制的，js每操作一次操作DOM，会使DOM进行重排或者重绘，每次操作都会消耗大量资源 ，比如diff、clone等等，但是使用JavaScript编程语言来操作这
些，就变得非常的简单 - 我们可以使用JavaScript来表达非常多的逻辑，而对于DOM本身来说是非常不方便，用js操作 虚拟DOM，DOM元素会在内存中更改，等所有操作结束之后，只需要一次更新即可，提高性能
- 因为对于直接操作DOM来说是有很多的限制的，js每操作一次操作DOM，会使DOM进行重排或者重绘，每次操作都会消耗大量资源 ，比如diff、clone等等，但是使用JavaScript编程语言来操作这
- 其次是方便实现跨平台，包括你可以将VNode节点渲染成任意你想要的节点
- 如渲染在canvas、WebGL、SSR、Native（iOS、Android）上
- 并且Vue允许你开发属于自己的渲染器（renderer），在其他的平台上渲染
虚拟DOM的渲染过程
template -> render渲染函数 ->虚拟DOM（VNode）-> 真实DOM -> 浏览器展示
方法一
实现template语法
定义templa语法
image.png
创建虚拟DOM
//1.创建虚拟DOM
class VNnode {
//构造函数
//一个节点会有标签（tag）属性（props）value，标签类型
constructor(tag, props, value, type) {
//标签名转小写
this.tag = tag && tag.toLowerCase()
this.props= props
this.value = value
this.type = type
this.children = []
}
//追加子元素
appendChild(vnode) {
this.children.push(vnode)
}
}
生成虚拟DOM
// 2.生成虚拟DOM
//使用递归来变量DOM元素，生成虚拟DOM
//vue源码使用栈结构 ，用栈结构存储父元素来实现递归
function getVNode(node) {
//获取节点类型
let nodeType = node.nodeType
//定义虚拟DOM
let _vnode = null
///nodeType 为一表示标签节点
if (nodeType === 1) {
let nodeName = node.nodeName
//节点属性
let attrs = node.attributes
//获取props
let _attrObj = {}
//遍历所有节点
for (let i = 0; i < attrs.length; i++) {
_attrObj[attrs[i].nodeName] = attrs[i].nodeValue
}
//nodeName标签名 ,_attrObj 属性 第三位value nodeType 标签类
// <div></div>,标签节点,中间的value是文本节点,所有value是undefined
//生成虚拟DOM
_vnode = new VNnode(nodeName, _attrObj, undefined, nodeType)
//node的子节点
let childNodes = node.childNodes
// 打印验证生成的子节点
//console.log(childNodes)
//子节点进行循环遍历生成虚拟DOM
for (let i = 0; i < childNodes.length; i++) {
_vnode.appendChild(getVNode(childNodes[i]))
}
}
//文本节点
//<div>哈哈哈</div> 中间的哈哈哈才能表示文本节点,所以标签名和属性时undefined
else if (nodeType === 3) {
_vnode = new VNnode(undefined, undefined, node.nodeValue, nodeType)
}
return _vnode
}
验证上面的模板转换为VNode
let root = document.querySelector('.root')
//转换为虚拟DOM
let vroot = getVNode(root)
console.log(vroot)
VNode
VNode生成成功，现在需要把虚拟DOM生成真实DOM
将虚拟DOM生成真正的DOM
//3.将虚拟DOM生成真正的DOM
//逆转第二步骤
function parseVNode(vnode) {
//获取类型
let type = vnode.type
//定义真实DOM
let _node = null
//文本节点
if (type === 3) {
return document.createTextNode(vnode.value) //创建文本节点
} else if (type === 1) {
//元素节点
_node = document.createElement(vnode.tag) // 创建元素标签名
//1.属性
let props = vnode.props //props此时为键值对 即还原 class = 'value'
Object.keys(props).forEach((key) => {
let attrName = key //属性名
let attrValue = props[key] //属性值
//绑定标签的属性值
_node.setAttribute(attrName, attrValue)
})
//2.子节点
let children = vnode.children
console.log(children)
//遍历子节点 ,子节点此时为虚拟DOM
children.forEach((subvnode) => {
_node.appendChild(parseVNode(subvnode)) //调用转换真实DOM函数,递归转换为子元素
})
return _node
}
}
验证真实DOM生成
//将虚拟DOM转换为真实DOM
let Edom = parseVNode(vroot)
console.log(Edom)
RNode
真实DOM生成成功
方法二
这里不使用模板语法利用h函数来生成虚拟DOM，通过mount方法将虚拟DOM进行挂载
h函数
实现h函数
function h(tag, props, children) {
//创建虚拟DOM
//vnode实际上是一个JavaScript对象,把传过来的参数放到一个对象中进行返回就行
return {
tag,
props,
children
}
}
验证虚拟DOM生成
生成虚拟DOM
实现mount函数
//实现mount
const mount = (vnode, container) => {
//将VNode生成真实节点元素
//1.创建真实标签元素,将标签元素保留到VNode上
const el = vnode.el = document.createElement(vnode.tag)
//2.处理props
if (vnode.props) {
//进行循环拿到key:value
for (const key in vnode.props) {
const value = vnode.props[key]
//判断如果是onClick类似事件,进行截取on之后的单词进行转换为小写
if (key.startsWith("on")) {
el.addEventListener(key.slice(2).toLowerCase(), value)
} else {
//设置属性
el.setAttribute(key, value)
}
}
}
//3.处理children
if (vnode.children) {
if (typeof vnode.children === "string") {
//判断children是字符串,说明是元素的内容,直接赋值即可
el.textContent = vnode.children
} else {
//如果是数组表明是有子元素节点,进行遍历数组元素,继续调用mount函数
vnode.children.forEach(item => {
mount(item, el)
})
}
}
//4.将元素挂载到contaniner
container.appendChild(el)
}
验证mount函数挂载成功
//2.将VNode通过mount 挂载到真实节点上
mount(vnode, document.getElementById('root'))
mount
