【Vue2深度学习】虚拟DOM篇-Vue中的虚拟DOM

虚拟DOM简介

所谓虚拟DOM，就是用一个JS对象来描述一个DOM节点，像如下示例：

<div class="a" id="b">我是内容</div>
​
{
  tag:'div',        // 元素标签
  attrs:{           // 属性
    class:'a',
    id:'b'},
  text:'我是内容',  // 文本内容
  children:[]       // 子元素
} 

我们把组成一个DOM节点的必要东西通过一个JS对象表示出来，那么这个JS对象就可以用来描述这个DOM节点，我们把这个JS对象就称为是这个真实DOM节点的虚拟DOM节点。

Vue中为什么要引入虚拟DOM

我们知道，Vue是数据驱动视图的，数据发生变化视图就要随之更新，在更新视图的时候难免要操作DOM,而操作真实DOM又是非常耗费性能的，这是因为浏览器的标准就把 DOM 设计的非常复杂，所以一个真正的 DOM 元素是非常庞大的，如下所示：

let div = document.createElement('div')
let str = ''
for (const key in div) {
  str &