谈谈你对vue虚拟DOM的理解

一、虚拟DOM和真实DOM区别

一段字符串，js代码，一段代码,一个变量

DOM节点在HTML中：

  1. <ul>
  2.   <li>li1</li>
  3.   <li>li1</li>
  4. </ul>

在JavaScript中

  1. let dom={
  2. tag:'ul',
  3. attributes:{id:"list"},
  4. children:["li1",'li2']
  5. }

更新虚拟dom节点：

  1. document.children.push("<ul>li1</ul>")

结论：虚拟dom：说白了就是以js对象的形式，去添加dom元素

在没渲染到真实dom之前，就是一段伪代码，先在js中批量进行更改，一次性增添到dom上

二、虚拟DOM

优势

  • 渲染的速度比较快，批量的DOM操作，一次性的追加

    虚拟dom的diff算法是算到n，真实dom的diff是n的三次方

  • 极大的减少了性能上的消耗

    弱势

  • 在原来的dom基础上去留一个副本，才能比较，占用的内存空间，根据更新的速度有关。

  • 如果是单一性质的更新，真实DOM会比批量性的虚拟DOM更快一些

本质上是优化了diff算法，采用了新旧dom对比，获取你差异的dom,一次性更新到真实的dom

三、Vue中的虚拟dom

vue当中的template模板编译，没有追加到真实DOM之前，就是一个虚拟DOM
1、将模板转化成ast(用一个对象描述js语法)
2、优化树，标记那些树是静态节点
3、将ast树生成js代码
详细过程：

把一个div转成render函数，拿到html解析，判断是否是以尖角号开头，判断是否是开始的标签，匹配开始的标签用正则

拿到标签节点把他存起来，div也可能会有属性，生成一个空数组，把标签拿掉，再去判断是不是结束的标签，如果不是
结束的标签，把元素上的属性放入到生成的空数组中。如果是匹配到结束的标签，删掉，就剩下开始标签，直到最后返回的一个过程。