我个人理解
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
|
14
xu33 OP 有没有真懂的来说一下啊 不知道的麻烦别胡扯了
|
15
shyling 2017-12-30 19:57:12 +08:00
为了 ssr 呗
|
18
xu33 OP 顶
|
19
linzhe141 240 天前
vue 应该做不到收集 dom 级别的副作用,只能收集到组件级别
|