这是一个创建于 2555 天前的主题，其中的信息可能已经有所发展或是发生改变。
我个人理解
react 使用 virtual dom，通过对比新老的 vdom 对象，计算诸如新增，删除等等变化，应用到真实 dom 上面
但是 vue 不是通过编译模板，利用 obj 的 getter 来获取依赖，和 dom 进行绑定，利用 setter 来触发变化监听函数来更新绑定的 dom，这里的变化监听是使用 es5 原生的功能来实现的
那么 vue2 用 vdom 的意义主要是什么
上面只是我大概的了解 可能有不对的地方
有没有大神可以解释一下
 |
1
wwqgtxx 2017-12-29 15:58:00 +08:00 via iPhone
合并修改呀，说到底就是为了减少 dom 操作的次数，提高性能
|
 |
2
guomuzz 2017-12-29 16:15:02 +08:00
js 很快 操作 dom 很慢 所以就 js 搞完 一起操作 dom
|
 |
3
zhlssg 2017-12-29 16:21:31 +08:00 via iPhone
服务端渲染
|
 |
4
miyalee 2017-12-29 16:22:08 +08:00 via Android
提高渲染性能
|
|
5
guomuzz 2017-12-29 16:35:44 +08:00
|
 |
6
ts8zs 2017-12-29 16:48:52 +08:00
用来 diff 使 innerHTML 操作最小化
|
 |
7
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 啊，还能上天怎的。 现代框架的问题 就是让很多人误解自己会写前端。 |
 |
8
xu33 OP @admos 虚拟 dom 也没法合成一次的 该操作几次 dom 还是操作几次 只是计算出哪些 dom 需要修改 在一个 tick 内集中批处理
我的意思是 vue 本身是利用 es5 对象的钩子函数特性去监听数据的变化 然后修改 dom 相当于已经对数据进行了一次 diff （只不过是 js 引擎内部实现） 然后 vdom 对比又有一次 diff （ js 框架实现） 这不是相当于 diff 了两次吗 这样做的必要性在哪里 或者说其实 vue 的 vdom 和 react 的用途不一样，不是用来 diff 的？ 有没有大神能详细讲讲 |
|
10
admos 2017-12-29 22:05:40 +08:00 via iPhone
@xu33 可以合并一次的，我整个替换 div 不就合并成一次 dom api 操作了么，diff 就是来做合并的事情的，vue2 setter getter 是修改的 vdom，vdom 再 patch 到 dom 上。js 框架（不包括 vdom 的那部分）不直接修改 dom
|
1 |
14
xu33 OP 有没有真懂的来说一下啊 不知道的麻烦别胡扯了
|
 |
15
shyling 2017-12-30 19:57:12 +08:00
为了 ssr 呗
|
|
18
xu33 OP 顶
|
 |
19
linzhe141 295 天前
vue 应该做不到收集 dom 级别的副作用，只能收集到组件级别
|
Select Language