什么是虚拟dom？虚拟dom如何新建？虚拟dom如何渲染？虚拟dom如何更新？
1.我们先新建一个index.html文件，然后写入
<script>
// 创建一个空的div
let div = document.createElement('div')
let ret = ''
// 然后打印一个空的div的属性
for (let key in div){
ret += key + ''
}
console.log(ret)
</script>
这个是打印出来的数据(当前div只有一层并且没有任何子元素) ---DOM的标准设计就是如此。由于dom的属性过多，稍微操作一下就会导致浏览器的性能极致下降。
20191108190137.png
虚拟 DOM 到底是什么，说简单点，就是一个普通的 JavaScript 对象，包含了 tag、data、children 三个属性。
<div id="app">
<p class="item">节点1</p>
</div>
// 模仿真实dom创建的虚拟dom
function createElement() {
return {
tag: 'div',
data: {id: 'app'},
children: [{
tag: 'p',
data: {
class: 'item'
},
children: '节点一'
}]
}
}
由于浏览器的标准过于复杂，我们自己使用js的object来描述一个原生的dom 我们就称之为这个对象为虚拟dom
2.接下来我们创建一个vdom.js
const vnodeType = {
HTML:'HTML',
TEXT: 'TEXT',
CLASS_COMPONENT: 'CLASS_COMPONENT'
}
const childType = {
EMPEY: 'EMPTY', // 子元素为空
SINGLE: 'SINGLE', // 子元素只有一个
MULTIPLE: 'MULTIPLE' // 子元素有多个
}
// 新建虚拟dom 标签名 属性 子元素
function createElement(tag,data,children= null) {
let flag,childrenFlag
if (typeof tag === 'string'){
// 普通的html标签
flag = vnodeType.HTML
} else if (typeof tag === 'function'){
// 方法式虚拟dom
flag = vnodeType.COMPONENT
} else {
// 普通文本
flag = vnodeType.TEXT
}
if (childrenFlag === null){
childrenFlag = childType.EMPEY
} else if (Array.isArray(children)){
// 通过长度来判断 childrenFlag的类型
let length = children.length
if (length === 0) {
childrenFlag = childType.EMPEY
} else {
childrenFlag = childType.MULTIPLE
}
}else {
// 其他情况认为是文本
childrenFlag = childType.SINGLE
children = createTextVnode(children + '')
}
// 返回vnode
return {
flag, // vnode类型
tag, // 标签, div 文本没有tag， 组件就是函数
data,
children,
childrenFlag
}
}
// 渲染dom
function render() {
}
// 新建文本类型的vnode
function createTextVnode(text){
return {
flag: vnodeType.TEXT,
tag: null,
data: null,
children: text,
childrenFlag: childType.EMPEY
}
}
然后在index.html中引入vdom.js
let div = createElement('div',{id:'test'},[
createElement('p',{},['节点1'])
])
console.log(JSON.stringify(div,null,2))
20191108194220.png
3.接下来写入render事件(更新操作在下一节)
const vnodeType = {
HTML:'HTML',
TEXT: 'TEXT',
// 前期不会介绍 component虚拟dom
COMPONENT: 'COMPONENT',
CLASS_COMPONENT: 'CLASS_COMPONENT'
}
const childType = {
EMPTY: 'EMPTY', // 子元素为空
SINGLE: 'SINGLE', // 子元素只有一个
MULTIPLE: 'MULTIPLE' // 子元素有多个
}
// 新建虚拟dom 标签名 属性 子元素
function createElement(tag,data,children= null) {
let flag,childrenFlag
if (typeof tag === 'string'){
// 普通的html标签
flag = vnodeType.HTML
} else if (typeof tag === 'function'){
// 方法式虚拟dom
flag = vnodeType.COMPONENT
} else {
// 普通文本
flag = vnodeType.TEXT
}
if (children === null){
childrenFlag = childType.EMPTY
} else if (Array.isArray(children)){
// 通过长度来判断 childrenFlag的类型
let length = children.length
if (length === 0) {
childrenFlag = childType.EMPTY
} else {
childrenFlag = childType.MULTIPLE
}
}else {
// 其他情况认为是文本
childrenFlag = childType.SINGLE
console.log(children)
children = createTextVnode(children + '')
}
// 返回vnode
return {
flag, // vnode类型
tag, // 标签, div 文本没有tag， 组件就是函数
data,
children,
childrenFlag,
el: null
}
}
// 渲染dom 要渲染的虚拟dom ，容器
function render(vnode,container) {
// 区分首次渲染 和 再次渲染
console.log(container)
mount(vnode,container)
}
// 首次挂载元素
function mount(vnode,container) {
// 区分flag的类型
let {flag} = vnode
console.log(flag)
if (flag === vnodeType.HTML){
mountElement(vnode,container)
}else if (flag === vnodeType.TEXT){
mountText(vnode,container)
}
}
// 新建文本类型的vnode
function createTextVnode(text){
return {
flag: vnodeType.TEXT,
tag: null,
data: null,
el: null,
children: text,
childrenFlag: childType.EMPTY
}
}
// 直接挂载dom
function mountElement(vnode,container) {
let dom = document.createElement(vnode.tag)
vnode.el = dom // 存储之前的dom
let {data,children,childrenFlag} = vnode // 属性
// 挂载data属性
if (data){
for (let key in data ){
// 节点 对应的key 旧值 新值
patchData(dom,key,null,data[key])
}
}
// 判断子元素数量
if (childrenFlag !==childType.EMPTY) {
if (childrenFlag === childType.SINGLE){
mount(children,dom)
}else if (childrenFlag === childType.MULTIPLE){
children.map(item=> mount(item,dom))
}
}
console.log(dom)
container.appendChild(dom)
}
// 直接挂载text
function mountText(vnode,container) {
let dom = document.createTextNode(vnode.children)
vnode.el = dom
container.appendChild(dom)
}
// 挂载data
function patchData(el,key,prv,next){
switch (key) {
case 'style':
for (let k in next){
el.style[k] = next[k]
}
break;
case 'class':
el.className = next
break;
default:
if (key[0] ==='@'){
if (next){
el.addEventListener(key.slice(1),next)
} else {
el.setAttribute(key,next)
}
}
}
}
修改index.html内容
<div id="app">
</div>
let vnode = createElement('div',{id:'test'},[
createElement('p',{key: 'a', style: {color: 'blue'},'@click':()=>{alert('xxx')}},'节点1'),
createElement('p',{key: 'b', style: {color: 'green'}},'节点2'),
createElement('p',{key: 'c', style: {fontSize: '15px'}},'节点3'),
createElement('p',{key: 'd', style: {color: 'yellow'},class: 'item-last'},'节点4'),
])
// console.log(JSON.stringify(div,null,2))
render(vnode,document.getElementById('app'))
</script>
这下我们就可以看到我们创建的虚拟dom成功渲染上去了
图片.png
虚拟dom详解（二）
