vue 什么是Virtual Dom？

2023-07-30 06:03:29

virtual Dom是什么？

Vue 2 和react一样使用了virtual Dom的技术，virtual Dom不是真正意义上的dom，而是一个轻量级的JavaScript对象，在状态发生变化时，virtual Dom会进行diff运算，来更新只需要被替换的DOM，而不是全部重绘，与DOM操作相比，virtual Dom是基于JavaScript计算的，所以开销会小很多。

vue 什么是Virtual Dom？

正常的DOM节点在HTML中是这样的：

<div id="main">
        <p>文本内容</p>
        <p>文本内容</p>
      </div>

用Virtual Dom创建的JavaScript对象一般会是这样的：

var vNode = {
    tag: 'div',
    attributes: {
        id: 'main'
    },
    children: [
        // p节点
    ]
}

Virtual Dom 是一种vnode类的表达，每个dom元素或组件都对应一个vnode对象，Vue源码中的VNode类差不多是这样的：

export interface VNode {
      tag?: string, // 当前节点的标签名
      data?: VNodeData, // 当前节点的数据对象
      children?: ?Array<VNode>, // 子节点，数组，也是Vnode类型
      text?: string, // 当前节点的文本，一般文本节点或注释节点会有该属性
      elm?: Node, // 当前虚拟节点对应的真实的DOM节点
      ns?: string, // 节点的namespace
      context?: Vue, // 编译作用域
      key?: string | number, // 节点key的属性，用于作为节点的标识，有利于patch的优化
      // functionalContext 函数化组件的作用域
      componentOptions?: VNodeComponentOptions, //创建组件实例时会用到的选项信息
      componentInstance?: Vue, //
      parent?: VNode, //组件的占位节点
      raw?: Boolean, // 原始html
      isStatic: Boolean, // 静态节点的标识
      isRootInsert: Boolean, // 是否作为根节点插入， 被<transition>包裹的节点，该属性的值为false
      isComment: Boolean, // 当前节点是否是注释节点
      isCloned: Boolean, // 当前节点是否是克隆节点
      isOnce: Boolean, // 当前节点是否有v-once指令
    }

VNode 主要类型有一下几种：

vue 什么是Virtual Dom？