前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue源码解读--Vitual DOM(虚拟DOM)

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

作者头像
用户3258338
发布2019-08-09 16:42:00
8100
发布2019-08-09 16:42:00
举报
文章被收录于专栏:女程序员的日常_Lin

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

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

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

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

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

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

代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 女程序员的日常 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档