V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xu33
V2EX  ›  程序员

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

  •  
  •   xu33 · 2017-12-29 14:39:23 +08:00 · 4449 次点击
    这是一个创建于 2500 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我个人理解

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

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

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

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

    有没有大神可以解释一下

    19 条回复    2024-03-07 16:12:20 +08:00
    wwqgtxx
        1
    wwqgtxx  
       2017-12-29 15:58:00 +08:00 via iPhone
    合并修改呀,说到底就是为了减少 dom 操作的次数,提高性能
    guomuzz
        2
    guomuzz  
       2017-12-29 16:15:02 +08:00
    js 很快 操作 dom 很慢 所以就 js 搞完 一起操作 dom
    zhlssg
        3
    zhlssg  
       2017-12-29 16:21:31 +08:00 via iPhone
    服务端渲染
    miyalee
        4
    miyalee  
       2017-12-29 16:22:08 +08:00 via Android
    提高渲染性能
    guomuzz
        5
    guomuzz  
       2017-12-29 16:35:44 +08:00
    https://www.zhihu.com/question/31809713
    二楼回复的有偏差
    看 vue 作者本人对于 vDom 的看法把
    ts8zs
        6
    ts8zs  
       2017-12-29 16:48:52 +08:00
    用来 diff 使 innerHTML 操作最小化
    admos
        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 啊,还能上天怎的。
    现代框架的问题 就是让很多人误解自己会写前端。
    xu33
        8
    xu33  
    OP
       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
        9
    xu33  
    OP
       2017-12-29 20:50:51 +08:00
    @xu33 因为 setter 中必然做了数据对比 也就是 diff 来判断是否需要修改绑定的 dom
    admos
        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
    admos
        11
    admos  
       2017-12-29 22:07:55 +08:00 via iPhone
    @xu33 看源码最容易理解的
    rogwan
        12
    rogwan  
       2017-12-29 22:39:49 +08:00
    @admos vdom 都是绑定在<div> 上的吗?(还是说连 <body> <form> <p> 都可以?)
    admos
        13
    admos  
       2017-12-29 23:41:47 +08:00 via iPhone   ❤️ 1
    @rogwan 都有
    xu33
        14
    xu33  
    OP
       2017-12-30 18:11:37 +08:00
    有没有真懂的来说一下啊 不知道的麻烦别胡扯了
    shyling
        15
    shyling  
       2017-12-30 19:57:12 +08:00
    为了 ssr 呗
    admos
        16
    admos  
       2017-12-30 21:52:58 +08:00 via iPhone
    @xu33 ………
    admos
        17
    admos  
       2017-12-30 21:53:43 +08:00 via iPhone
    @xu33 你还真是自信
    xu33
        18
    xu33  
    OP
       2018-01-02 14:39:34 +08:00
    linzhe141
        19
    linzhe141  
       240 天前
    vue 应该做不到收集 dom 级别的副作用,只能收集到组件级别
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2728 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 12:31 · PVG 20:31 · LAX 05:31 · JFK 08:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.