【vue】虚拟DOM

一、什么是虚拟DOM

简单来说：虚拟DOM就是用JS对象模拟DOM结构

虚拟DOM实际上它只是一层对真实DOM的抽象，以javascript对象作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上

在JavaScript对象中，虚拟DOM表现为一个object对象。并且最少包含标签名(tag)、属性(attrs)和子元素对象(children)三个属性，不同框架对这三个属性的命名可能会有差别

创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一对应

在vue中同样使用到了虚拟DOM技术

定义真实DOM

<div id="app">
    <p class="p">节点内容</p>
    <h3>{
   
   { foo }}</h3>
</div>

实例化 vue

const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})

根据render的render，我们能得到虚拟DOM

(function anonymous() {
	with(this){
        return _c(
            'div',
            {
                attrs:{"id":"app"}
            },
            [_c(
                'p',
                {staticClass:"p"},
				[_v("节点内容")]
            ),
            _v(" "),
            _c('h3',
                [_v(
                    _s(foo)
                )]
            )]
        )
    }
})

通过VNode，vue可以对这颗抽象数进行创建节点，删除节点以及修改结点的操作，经过diff算法得出一些需要修改的最小单位，再更新视图，减少了DOM操作，提高了性能

二、为什么需要虚拟DOM

DOM是很慢的，其元素非常庞大，页面的性能问题也很大，大部分都是有DOM操作引起的真实DOM节点，哪怕是一个最简单的div也包含着很多属性，可以打印出来看一下

var div = document.createElement('div')
var str = ''
for(var key in div){
    str = str + key + ' '
}
console.log(str)

由此可见，操作DOM的代价是昂贵的，频繁操作还会出现页面卡顿，影响用户体验

举个例子

在使用传统的原生api或jQuery去操作DOM时，浏览器会从构建DOM书开始从头到位执行一遍流程

在操作时，需要更新10个DOM节点，浏览器没有这么智能，收到第一个更新DOM请求后，并不知道后续还有9次更新操作，因此会马上执行流程，最终执行10次流程

但是通过VNode，通过更新10个DOM节点，虚拟DOM不会立即操作DOM，而是将10次更新diff内容保存到本地的一个js对象中，最终将这个js对象中，最终将这个js对象一次性attach到DOM树上，避免大量的无谓计算

很多人认为虚拟DOM最大的优势是diff算法，减少JavaScript操作真实DOM的带来的性能消耗。虽然这是一个虚拟DOM带来的一个优势，但并不是全部。虚拟DOM最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的DOM，可以是安卓和IOS的原生组件，可以是近期很火热的小程序，也可以是各种GUI

三、如何实现虚拟DOM

真实DOM

虚拟DOM

createElement 创建 VNode 的过程，每个 VNode 有 children，children 每个元素也是一个VNode，这样就形成了一个虚拟树结构，用于描述真实的DOM树结构

一、什么是虚拟DOM

二、为什么需要虚拟DOM

三、如何实现虚拟DOM

猜你喜欢