浅谈Vue的虚拟dom

Vue的虚拟dom

我们需要带着几个问题思考着来虚拟dom！！！

1. 什么是dom？
2. 什么是虚拟dom？虚拟dom有什么作用和好处？

什么是dom？
在html中dom其实就是节点，即就是html各种的标签在JavaScript中的最大特性其实就是dom节点的操作，但是我们在每每操作dom的时候都往往的消耗电脑的性能，所以在这个问题上Vue的虚拟dom就已经解决。

什么是虚拟dom？
就是JavaScript的内存对象。Vue的虚拟dom是通过diff算法尽可能的最大限度的通过DOM树渲染出最真实的html页面，从而减少性能的消耗。
Vue在页面加载的时候先建立一个虚拟DOM树对真是的DOM进行密切追踪。
虚拟DOM树需要先解析CSS样式和DOM树，让后整个成一个完整的DOM树，最后在通过Vue底层基础代码来完整的渲染在html页面上
前面说了虚拟DOM是一个JavaScript内存对象，对象是通过地址的地址的形式保存在内存中，因此减少对电脑内存的消耗，从而达到性能优化的目的。
虚拟DOM如何尽可能的最大限度的通过DOM树渲染出最真实的html页面？

1. 页面加载的时候先渲染一个虚拟DOM树(旧DOM树)
2. 当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom
3. 拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法）。得到需要更新的地方之后，更新内容
   每当页面的DOM结构、数据等发生变化的时候，旧虚拟DOM和新的虚拟DOM通过diff算法先进行同级对比，而不是从重新渲染，当同级DOM结构数据发生变化的时候，前面相同的DOM结构不需要重新渲染，而是通过内存的形式保存了下来，后面的从同级的不同DOM结构开始重新绘制，重新渲染DOM树，从而渲染出一个新的DOM

最后在上图大概模拟了一下Vue的虚拟DOM的存在形式
举个例子下面是html 的DOM结构

<div id="content">
        <p>{{ 1+1}}</p>
        <ul class="list-group">
            
        </ul>
</div>

虚拟DOM组成的DOM树大概是这个样子的

//1.初始化的时候内存中生成一颗虚拟dom树  
var vDom = {
            tag:"div",
            attr:{
                id:"content"
            },
            children:[
                {tag:"p",content:2},
                {tag:"ul",attrs:{className:"list-group"}}
            ]
        }

每当我们数据发生了改变，比如向ul里面插入两个li标签，就会重新的形成一颗新的虚拟DOM树，然后新的和旧的通过diff算法进行对比，将对比出来的差异部分进行真是的DOM 渲染（注意：不是全部进行虚拟DOM重新渲染，而是将对比来的差异部分进行真的DOM结构渲染）

//新的虚拟DOM树
  var newDom = {
            tag:"div",
            attr:{
                id:"content"
            },
            children:[
                {tag:"p",content:2},
                {tag:"ul",attrs:{className:"list-group"},children:[
                    {tag:"li",content:"11111"},
                    {tag:"li",content:"22222"}
                ]}
            ]
        }

最后的html结果

<div id="content">
        <p>{{ 1+1}}</p>
        <ul class="list-group">
            <li>11111</li>
            <li>22222</li>
        </ul>
</div>

2020.3.23---------------------------------------------------------------------------昵称：@我托铁