vue 为何引入virtual dom

不再解释什么是virtual dom了,烂大街了。
这里问题核心是vue本身具有数据绑定或者说数据劫持,我们的数据是对应着某个dom的某个属性的。通过数据绑定,我们的数据可以“靶向”定位出具体哪个dom的哪个属性,然后直接dom操作进行修改,何必搞什么virtual dom和diff,直接更新过去不就行了?
至于最小化操作,我们完全可以保留一份老数据,然后异步统一对比新老数据,有不同的就更新,也不需要diff啊?
知乎 Vue采用虚拟DOM的目的是什么?



vue是从2.0引入virtual dom的,那么首先看:
Announcing Vue.js 2.0
Vue 2.0 发布了!
Vue 的理念问题

从性能方面:

现在的渲染层基于一个轻量级的 virtual-DOM 实现,在大多数场景下初试化渲染速度和内存消耗都提升了 2~4 倍 (详见这里的 benchmarks)。从模板到 virtual-DOM 的编译器和运行时是可以独立开来的,所以你可以将模板预编译并只通过 Vue 的运行时让你的应用工作起来,而这份运行时的代码 min+gzip 之后只有不到 12kb (提一下,React 15 在 min+gzip 之后的大小是 44kb)。编译器同样可以在浏览器中工作,也就是说你也可以写一段 script 标签然后开始你的工作,就像以前一样。而即便你把编译器加进去,build 出来的文件 min+gzip 之后也仅有 17kb,仍然小于目前的 1.0 版本。

2.0 用一个 fork 自 snabbdom 的轻量 Virtual DOM 实现对渲染层进行了重写。在其上层,Vue 的模板编译器能够在编译时做一些智能的优化处理,例如分析并提炼出静态子树以避免界面重绘时不必要的比对。新的渲染层较之 v1 带来了巨大的性能提升,也让 Vue 2.0 成为了最快速的框架之一。除此之外,它把你在优化方面需要做的努力降到了最低,因为 Vue 的响应系统能够在巨大而且复杂的组件树中精准的判断其中需要被重绘的那部分。

总的来说:体积不变多少,初始化渲染性能提升,内存占用减少。

1.体积不变暂且不说,初始化渲染提升、内存占用减少是为什么?
单文件vue的加入,编译时便可依靠vdom把模板文件进行一定预编译,无需如模板字符串template:"<div>...</div>"等从零编译,资源占用应当变少(好像不需要vdom也能这样优化,会复杂了点...?)。

2.关于vdom多了diff的问题,vue并没有抛弃自己响应式的根。凭借原有基础vue的vdom实现具有自我特色,无需像react那样搞什么shouldcomponentupdate来优化,vue自己就能较为精准避免不需要的diff,速度仍然很快(不用vdom根本不用diff...?)

3.又如列表方面,采用vdom可以提高复用真实dom。如解析vue2.0的diff算法,这里如果不采用vdom,单凭数据绑定作出的选择就是直接新建、删除已有节点

功能方面

最直接的就是多了render函数、支持了jsx、可以实现服务器渲染。除此之外还有更多的可扩展性和更高一层的抽象能力,而且很大可能是出于这部分考虑而非性能(反正事实证明比原来快,也没毛病),引用作者尤雨溪部分原话:

Vue 2.0 引入 vdom 的主要原因是 vdom 把渲染过程抽象化了,从而使得组件的抽象能力也得到提升,并且可以适配 DOM 以外的渲染目标。这一点是借鉴 React 毫无争议,因为我认为 vdom 确实是个好思想。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常...
    NARUTO_86阅读 17,120评论 6 65
  • 一,vue是什么? Vue.js(读音 /vjuː/, 类似于view) 是一套构建用户界面的渐进式框架。与其他重...
    不成才的IT狗阅读 3,143评论 0 31
  • 变化这件事谈论页面的变化之前,咱们先看下数据和页面(视觉层面的页面)的关系。数据是隐藏在页面底下,通过渲染展示给用...
    Www刘阅读 438评论 0 1
  • 一、Virtual DOM 是什么 本质上来说,Virtual DOM 只是一个简单的 JS 对象,并且最少包含 ...
    _既白_阅读 390评论 0 1
  • (想象着)我躺在海边,躺在沙滩上,没有风、没有浪;蓝蓝的海水,蓝蓝的天空,海面平静极了…… 一群海鸥在...
    崴崴一笑阅读 2,423评论 0 1