什么是虚拟 dom( virtual dom )

本质上, 虚拟 dom 就是一个普通的 dom 对象,它用来描述真实 dom 的结构

// <ul id="list">
//   <li class="item">li-1</li>
//   <li class="item">li-2</li>
//   <li class="item">li-3</li>
// </ul>
// vdom 如下:
var vdom = {
  tag: "ul",
  attrs: {
    id: "list",
  },
  children: [
    {
      tag: "li",
      attrs: [
        {
          className: "item",
        },
      ],
      children: ["li-1"],
    },

    {
      tag: "li",
      attrs: [
        {
          className: "item",
        },
      ],
      children: ["li-2"],
    },
    {
      tag: "li",
      attrs: [
        {
          className: "item",
        },
      ],
      children: ["li-3"],
    },
  ],
};

虚拟 dom 用来做什么?

频繁的操作 dom 会导致页面频繁的重绘, 回流, 性能非常差, 可以用 virtual dom来记录最开始 dom 的属性, 然后 dom 修改后的属性, 然后对比差异, 然后一次性的, 只修改需要修改的内容, 提高性能, 如 vue.js 和 react.js 就是这样做的

使用虚拟 dom 的好处?

virtual dom 只是一个普通的 js 对象, 并不需要浏览器环境, 所以是跨环境使用的, 在浏览器环境中可以使用, 在 nodejs 环境中也可以使用