V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 3042 days ago, the information mentioned may be changed or developed.
我个人理解
react 使用 virtual dom，通过对比新老的 vdom 对象，计算诸如新增，删除等等变化，应用到真实 dom 上面
但是 vue 不是通过编译模板，利用 obj 的 getter 来获取依赖，和 dom 进行绑定，利用 setter 来触发变化监听函数来更新绑定的 dom，这里的变化监听是使用 es5 原生的功能来实现的
那么 vue2 用 vdom 的意义主要是什么
上面只是我大概的了解 可能有不对的地方
有没有大神可以解释一下
 |
1
wwqgtxx Dec 29, 2017 via iPhone
合并修改呀，说到底就是为了减少 dom 操作的次数，提高性能
|
 |
2
guomuzz Dec 29, 2017
js 很快 操作 dom 很慢 所以就 js 搞完 一起操作 dom
|
 |
3
zhlssg Dec 29, 2017 via iPhone
服务端渲染
|
 |
4
miyalee Dec 29, 2017 via Android
提高渲染性能
|
|
5
guomuzz Dec 29, 2017
|
 |
6
ts8zs Dec 29, 2017
用来 diff 使 innerHTML 操作最小化
|
 |
7
admos Dec 29, 2017
实质就是，对于 以下
<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 Dec 29, 2017 via iPhone
@xu33 可以合并一次的，我整个替换 div 不就合并成一次 dom api 操作了么，diff 就是来做合并的事情的，vue2 setter getter 是修改的 vdom，vdom 再 patch 到 dom 上。js 框架（不包括 vdom 的那部分）不直接修改 dom
|
1 |
14
xu33 OP 有没有真懂的来说一下啊 不知道的麻烦别胡扯了
|
 |
15
shyling Dec 30, 2017
为了 ssr 呗
|
|
18
xu33 OP 顶
|
 |
19
ooo4 Mar 7, 2024
vue 应该做不到收集 dom 级别的副作用，只能收集到组件级别
|
Select Language