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

那就这样吧,又能怎样呢?

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

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

原文发布于微信公众号 - 女程序员的日常(gh_df41d619fb70)

原文发表时间:2019-08-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券