vue源码解读--Vitual DOM(虚拟DOM)

Posted 2021-04-13 女程序员的日常

那就这样吧，又能怎样呢？

宝宝们，你们那里下雨了吗？我这里下雨了，雨声很好听~

Virtual DOM产生的原因是浏览器中DOM是很“昂贵”的，我们来看一下一个p元素的属性都有哪些：

哇偶，这可不是全部的截图哦，可以看出，真正的DOM元素是非常庞大的。所以如果我们频繁的去做DOM更新，会产生一定的性能问题。

Virtual DOM是用一个原生的JS对象去描述一个DOM节点，所以它比创建一个DOM的代价要小很多。

在Vue.js中，Virtual DOM是用一个叫做VNode的Class来描述的，定义在src/core/vdom/vnode.js中：

export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array<VNode>; text: string | void; parent: VNode | void; // component placeholder node  ...   constructor ( tag?: string, data?: VNodeData, children?: ?Array<VNode>, text?: string, elm?: Node, context?: Component, componentOptions?: VNodeComponentOptions, asyncFactory?: Function) { this.tag = tag this.data = data this.children = children this.text = text   ... }
 // DEPRECATED: alias for componentInstance for backwards compat. /* istanbul ignore next */ get child (): Component | void { return this.componentInstance }}

上面我已经把一些包含Vue.js的特性的代码省略掉了，实际上VNode的核心定义只有几个关键的：标签名、数据、子节点等，那些省略的属性是用来扩展VNode的灵活性的。由于VNode只是用来映射到真实的DOM的渲染，不需要包含操作DOM的方法，so它是非常轻量和简单的。

愿我们有能力不向生活缴械投降---Lin