谁能用简单的语言解释下 vue2 用 virtual dom 的目的是啥

2017-12-29 14:39:23 +08:00
 xu33

我个人理解

react 使用 virtual dom，通过对比新老的 vdom 对象，计算诸如新增，删除等等变化，应用到真实 dom 上面

但是 vue 不是通过编译模板，利用 obj 的 getter 来获取依赖，和 dom 进行绑定，利用 setter 来触发变化监听函数来更新绑定的 dom，这里的变化监听是使用 es5 原生的功能来实现的

那么 vue2 用 vdom 的意义主要是什么

上面只是我大概的了解 可能有不对的地方

有没有大神可以解释一下

4325 次点击
所在节点    程序员
19 条回复
wwqgtxx
2017-12-29 15:58:00 +08:00
合并修改呀，说到底就是为了减少 dom 操作的次数，提高性能
guomuzz
2017-12-29 16:15:02 +08:00
js 很快 操作 dom 很慢 所以就 js 搞完 一起操作 dom
zhlssg
2017-12-29 16:21:31 +08:00
服务端渲染
miyalee
2017-12-29 16:22:08 +08:00
提高渲染性能
guomuzz
2017-12-29 16:35:44 +08:00
https://www.zhihu.com/question/31809713
二楼回复的有偏差
看 vue 作者本人对于 vDom 的看法把
ts8zs
2017-12-29 16:48:52 +08:00
用来 diff 使 innerHTML 操作最小化
admos
2017-12-29 17:30:21 +08:00
实质就是，对于 以下
<div>
<p>圣光背叛了我</p>
<p>香蕉是女孩最好的朋友</p>
</div>
你去修改第一个 p 和第二个 p,要调用 dom api 两次，但是虚拟 dom 可以合并成一次，从而提高效率
对于那些拿虚拟 dom 和原生操作做对比，就和大部分性能测试一样，都是哈哈哈。
虚拟 dom 本质上追求的是 1+1 < 2
还有 vue2 为什么要引入 vdom ？绑定 getter setter 也要操作 dom 啊，还能上天怎的。
现代框架的问题 就是让很多人误解自己会写前端。
xu33
2017-12-29 19:52:40 +08:00
@admos 虚拟 dom 也没法合成一次的 该操作几次 dom 还是操作几次 只是计算出哪些 dom 需要修改 在一个 tick 内集中批处理

我的意思是 vue 本身是利用 es5 对象的钩子函数特性去监听数据的变化 然后修改 dom 相当于已经对数据进行了一次 diff （只不过是 js 引擎内部实现）

然后 vdom 对比又有一次 diff （ js 框架实现）

这不是相当于 diff 了两次吗 这样做的必要性在哪里

或者说其实 vue 的 vdom 和 react 的用途不一样，不是用来 diff 的？

有没有大神能详细讲讲
xu33
2017-12-29 20:50:51 +08:00
@xu33 因为 setter 中必然做了数据对比 也就是 diff 来判断是否需要修改绑定的 dom
admos
2017-12-29 22:05:40 +08:00
@xu33 可以合并一次的，我整个替换 div 不就合并成一次 dom api 操作了么，diff 就是来做合并的事情的，vue2 setter getter 是修改的 vdom，vdom 再 patch 到 dom 上。js 框架（不包括 vdom 的那部分）不直接修改 dom
admos
2017-12-29 22:07:55 +08:00
@xu33 看源码最容易理解的
rogwan
2017-12-29 22:39:49 +08:00
@admos vdom 都是绑定在<div> 上的吗？（还是说连 <body> <form> <p> 都可以？）
admos
2017-12-29 23:41:47 +08:00
@rogwan 都有
xu33
2017-12-30 18:11:37 +08:00
有没有真懂的来说一下啊 不知道的麻烦别胡扯了
shyling
2017-12-30 19:57:12 +08:00
为了 ssr 呗
admos
2017-12-30 21:52:58 +08:00
@xu33 ………
admos
2017-12-30 21:53:43 +08:00
@xu33 你还真是自信
xu33
2018-01-02 14:39:34 +08:00
顶
linzhe141
53 天前
vue 应该做不到收集 dom 级别的副作用，只能收集到组件级别

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/418607

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX