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

vue 等框架不如 jquery 的地方: dom 无法参与计算,仅仅是用来展示。

  •  
  •   gs139 · 2018-03-15 11:29:19 +08:00 · 13696 次点击
    这是一个创建于 2205 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比方说一排按钮,点击过以后变成灰色,灰色的再点击就不参与计算,用 jquery 的话,直接根据这个按钮的颜色就可以判断是否再参与计算。而 vue,必须得给这个按钮加一个属性,用来记录它的颜色。

    这只是个简单的例子,如果是 n 排按钮,按钮要用 div 包裹,点击过后 div 的背景也变色,也要根据这个按钮的父元素 div 的颜色来判断,如果是 n 层 div 嵌套,用 vue 就很复杂了,用 jquery 直接用 parent().parent().parent()向上取父元素的属性即可。

    简而言之,jquery 计算页面逻辑就像图形数据库,图形本身是参与运算的,而 vue 等框架,你必须得在脑子里建模,图形不参与运算,只用来展示。
    第 1 条附言  ·  2018-03-15 13:16:26 +08:00
    jquery 直接操作 dom 是天然的数据可视化。
    第 2 条附言  ·  2018-03-15 14:26:34 +08:00
    vue 等框架遇到复杂的 UI 操作,可能得给模型实现一套状态机 state machine。

    而 dom,天然就是一个状态机,并且是看得见摸得着的,在开发过程中随时可以对这个对象的状态进行手动操作,从而调试、验证自己的代码逻辑
    138 条回复    2018-03-16 13:25:26 +08:00
    1  2  
    gouflv
        101
    gouflv  
       2018-03-15 21:07:56 +08:00
    数据可视化应该描述 D3 还差不多,套在 JQ 和 DOM 上很搞笑。。。
    sox
        102
    sox  
       2018-03-15 21:12:34 +08:00   ❤️ 3
    理智告诉我,不能鄙视小白
    TanJunqiang
        103
    TanJunqiang  
       2018-03-15 21:32:48 +08:00
    数据为什么要和视图长在一起呢
    er567
        104
    er567  
       2018-03-16 00:46:43 +08:00 via iPhone
    炸出一堆前端送铜币(我也是
    msg7086
        105
    msg7086  
       2018-03-16 02:05:28 +08:00   ❤️ 2
    > 在开发过程中随时可以对这个对象的状态进行手动操作

    当楼主还在沉迷于对每个对象手动操作的时候,Vue 程序员们早早地建完了模型写完了组件下班回家打游戏去了。
    hlwjia
        106
    hlwjia  
       2018-03-16 02:25:04 +08:00 via iPhone
    @msg7086 不知道楼主这样写累不累,我感觉是很累的
    msg7086
        107
    msg7086  
       2018-03-16 02:30:00 +08:00
    @hlwjia 其实也不是写得累的问题,主要是可维护性的问题。
    写得累点最多也就两三倍时间,可维护性这玩意花掉的可是数十上百倍的时间。
    改动一个小功能直接花掉两周,楼主怕不是很快就崩了。
    hlwjia
        108
    hlwjia  
       2018-03-16 02:34:36 +08:00
    @msg7086 反正写组件我是很乐意的 :D
    shynome
        109
    shynome  
       2018-03-16 03:06:15 +08:00 via Android
    我只问一句多窗口同一数据渲染怎么弄?
    数据一份更新多窗口同步更新,难道从其他页面中的 Dom 中查找数据,还不是要抽出一个数据源来通知其他页面进行更新
    eurokingbai2
        110
    eurokingbai2  
       2018-03-16 09:14:15 +08:00
    MVC 都这样吧
    SilentDepth
        111
    SilentDepth  
       2018-03-16 09:24:18 +08:00
    一个数组生成一个列表,根据请求的数据切换不同元素的不同状态的时候怎么办?
    根据数据切换元素的结构(<input> 变 <button> 这种)的时候怎么办?
    大量并发数据密集更新同一个元素的时候(性能)怎么办?
    需要组件化并引用到多个页面场景的时候怎么办?
    写一个内容不确定(需要其他人按要求填充)的组件的时候怎么办?
    一个 Object 映射为一堆元素的整合体的时候(更新视图)怎么办?

    我想专注于数据,不想思考 DOM 结构的时候怎么办?

    ---

    jQuery 就是一套操作 DOM 的工具,甚至不算框架。当你需要给应用分层的时候,你依然需要基于 jQuery 封装一个「视图层」出来。看看 jQuery 和 Vue 的体积,jQuery 真的有那么大的优势吗?
    aokihu
        112
    aokihu  
       2018-03-16 10:19:51 +08:00   ❤️ 2
    我想说在座的各位都 TM 的是垃圾,没有一个回答到点子上的,首先这个提问者就是一个小白,如果你工作好几年了,那么恭喜你,你一点进步都没有,在座的各位也是
    为啥开发了 React 和 VUE 还有 angular 框架,angualr 先不去管他,因为他的设计理念跟那两个不同,但是 React 和 VUE 要解决的就是 DOM 速度慢的问题
    React 和 VUE 都是采用了虚拟 DOM 来维护自己的内部状态,虽然为此要多消耗一部分内存,和处理时间,但是跟直接去操作 DOM 来说,快的不是一点点,至少 10 倍的速度是有的,如果你的项目非常大的话,那可能就是 100 倍甚至 1W 倍的差距了。
    你以为你改变了 DOM 属性这个操作很简单?你知道 DOM 的全称吗? Document Object Model,看清楚 Document,也就是说你改的只是一个标签,实际计算的是整个标签树,同时还有样式的渲染,布局的计算等等,你如果什么都不懂,直接一个一个去操作 DOM 对象,你知道浏览器被你折磨成什么样子么?而 React 和 VUE 就是将你的数据变化线记录下来,然后通过对比内部的虚拟 DOM,将变化的部分替换到真实的 DOM 树中,这样以来你改变 1W 次,最后操作 DOM 树也就一次而已。如果你知道 document.createfragment()这个 API 应该知道,替换的消耗时间将会远远的少于你直接去一个一个修改节点内容。
    你如果是纯展示页面,用 jQuery 没关系,但是你要是处理大量数据的话,使用 jQuery 就是找死了,别人花了 5、6 年时间开发的一个框架,难道还比不上你一个入门者的理解?
    codehz
        113
    codehz  
       2018-03-16 10:25:18 +08:00
    @aokihu #112 讲道理嘛,vue1 的时候还是没有 vdom 的,这个东西只是其中一个理由而已。。。
    aokihu
        114
    aokihu  
       2018-03-16 10:30:25 +08:00   ❤️ 1
    @codehz VUE1 采用的是 Angular 的理念,因此我说了不要提 Angular 了,Angular 采用的是脏数据检查,将数据与 UI 显示同步,他解决的仅仅是数据的同步问题,因此性能上面并没有提升,你可以看看当年 angular+react 的实现,速度是纯 angular 的 100 倍,而 angular2+react 的速度简直就是火箭速度,因此 VUE2 后来改用虚拟 DOM 是很明智的举措,angular 能做的其实 jQuery 有个插件也能实现
    SourceMan
        115
    SourceMan  
       2018-03-16 10:36:24 +08:00
    @aokihu #112
    划重点!!!》》我想说在座的各位都 TM 的是垃圾

    大家散了吧,不能有异见的人已入场
    lizhenda
        116
    lizhenda  
       2018-03-16 10:38:00 +08:00
    此贴反应各自的编程水平,真是赤裸裸啊,是骡子是马看你说的话大概就清除编程思维处于什么水平了
    lizhenda
        117
    lizhenda  
       2018-03-16 10:39:23 +08:00
    面向过程写多了会蠢的,天天写业务也会目空一切
    learnshare
        118
    learnshare  
       2018-03-16 10:39:40 +08:00
    @aokihu React 和 VUE 要解决的就是 DOM 速度慢的问题
    这不是写着两个库的主要原因,甚至一开始考虑的根本不是性能问题
    shiye515
        119
    shiye515  
       2018-03-16 10:41:56 +08:00
    推荐楼主去关注 真阿当,你们算是臭味相投
    crs0910
        120
    crs0910  
       2018-03-16 10:43:32 +08:00
    @aokihu #112 你是在钓鱼吗?
    murmur
        121
    murmur  
       2018-03-16 10:46:40 +08:00
    @aokihu DOM 速度慢?妈呀,如果真的优化到点子上会比虚拟 dom 慢
    还是你想说那种 batch insert 一个一个创建节点要比 template 渲染完字符串一次插入刷新要快
    你可以说现在浏览器牛逼 数据没到多的能看出差异
    但是的却虚拟 dom 就是改善开发体验而不是改善性能体验的
    liuguangcuican
        122
    liuguangcuican  
       2018-03-16 11:02:28 +08:00
    这贴有种'PHP 是最好的语言'的 影子:dog
    leekafai
        123
    leekafai  
       2018-03-16 11:10:19 +08:00
    真是……
    这是各种 vm 不同于 jquery 的地方,不是“不如”。
    想当初我都用的 jquery 肉搏页面,后来历史进程到了,只要用心去使用一次 vm 框架,就能体验到不去直接操作 dom 有什么好处的:
    1. 状态统一。如果多个控件归属一个全局状态,用 jquery 的时候,很多人需要去肉搏样式修改,用 vm 就不需要了,这是代码上去帮你完成的事。
    2.document 对象滥用。很多 jquery 使用者,产品性能低下的原因是滥用 document 对象,不习惯去使用常量保存数据,导致每次都要过一遍 document 对象。
    3.无需直接操作 dom。这件事情有多重要,我想如果拥有一定量项目经验的开发者一定可以感受出来,页面变化是最大的,但是前端逻辑变化是很小的,逻辑操作数据,设置状态,再自动响应到页面中,可以写少超多代码。
    svenzhao
        124
    svenzhao  
       2018-03-16 11:13:42 +08:00
    @feverzsj mvvm/ui 数据绑定 是客户端开发用了多少年的东西了 到你这就成了畸形产物了???????????????????
    aokihu
        125
    aokihu  
       2018-03-16 11:21:53 +08:00 via Android
    楼主一看就是没有开发过 ie6,时代变了,以前的英雄居然现在被你认为是魔王
    svenzhao
        126
    svenzhao  
       2018-03-16 11:24:08 +08:00
    @aokihu
    "
    React 和 VUE 都是采用了虚拟 DOM 来维护自己的内部状态,虽然为此要多消耗一部分内存,和处理时间,但是跟直接去操作 DOM 来说,快的不是一点点,至少 10 倍的速度是有的,如果你的项目非常大的话,那可能就是 100 倍甚至 1W 倍的差距了。
    "
    就这句话好意思来 教育别人?????dom 慢?????
    所有直接操作 dom 的行为 一定是比虚拟 dom 快的

    谁告诉你 vue1.0 是脏检测的??? 你分的清楚脏检测和虚拟 dom 吗

    以后知识没学清楚 不要在网上乱科普 你这种半吊子吹水 单反差不多的公司面试都过不去
    SilentDepth
        127
    SilentDepth  
       2018-03-16 11:24:28 +08:00
    @aokihu #114 Vue 1.0 解决的是精确依赖跟踪的问题,通过绑定 watcher 更新细粒度元素,但 watcher 过多会带来性能损失,所以 Vue 2.0 引入 VDOM 平衡一下。VDOM 是提高性能的手段,并不是目的( React 是这样,Vue 更是)
    SilentDepth
        128
    SilentDepth  
       2018-03-16 11:26:50 +08:00
    @svenzhao #126 直接操作 DOM 咋就比 VDOM 快了……如果直接操作 DOM 快的话 React 搞 VDOM 是图啥
    lscho
        129
    lscho  
       2018-03-16 11:29:36 +08:00
    不是。。。我就想问一句,到底是你的颜色控制是否可用,还是数据控制是否可用?如果是颜色,难道设计给你一张图,上面画着灰色,就一直不可用吗?
    既然是数据控制颜色,那 vue 为什么还要去操作 dom ?直接绑定就可以了啊,相当于给你省去操作 dom 的步骤了。

    不要假设实际应用中不存在的情况好吗,实际应用中,你点个按钮不做任何判断就让他禁用?实际应用中,div 的颜色会无缘无辜的变化?按照你的设想就是纯 ui 特效啊,连 jq 都不用就行,原生 js 也是两行代码的事。

    没有最好的技术,只有最适合的技术。一味的否定某种东西,只能证明自己没有接触到他的使用场景,只能证明自己的水平还没有达到理解这种技术的地步。
    WenJimmy
        130
    WenJimmy  
       2018-03-16 11:33:54 +08:00
    萌新瑟瑟发抖
    svenzhao
        131
    svenzhao  
       2018-03-16 11:34:03 +08:00
    @SilentDepth
    首先 Vdom=>diff=>render 最后是不是还是使用浏览器 dom 的 api?

    我的意思是 Vdom 目的是为了解放程序员在 diff 这一层的浪费的时间和代码量还有维护成本.
    Vdom 最终也无法避免操作 dom,它优化是 diff 过程.最后显示在浏览器上还是要使用普通的 api.

    //举例
    有一个 10 行数据展示 然后通过 ajax 获取第一行数据 只修改第一行.
    这一个非常明确需求下 直接 callback 之后操作第一行的文字内容改变 就少了 diff 的操作了 因为人你脑直接改了啊
    SilentDepth
        132
    SilentDepth  
       2018-03-16 11:37:55 +08:00
    @svenzhao #131 也许是你表达得不具体。就是因为 DOM 操作慢(相对于 JS 的计算速度)但又无可避免,所以才要尽可能减少 DOM 操作,而 VDOM 就是实现这个目的的一种方案。你后面的举例太不普适了,哪有那么多只需要修改确定位置元素的需求
    svenzhao
        133
    svenzhao  
       2018-03-16 11:38:33 +08:00
    @SilentDepth 共勉
    MinonHeart
        134
    MinonHeart  
       2018-03-16 12:53:25 +08:00 via iPhone
    神特码 dom 慢,dom 是文档对象模型,慢个屁啊!慢的是渲染,渲染,渲染。
    DaraW
        135
    DaraW  
       2018-03-16 13:06:07 +08:00 via iPhone
    @aokihu
    槽点太多,随便挑两个说下。

    Vue1 使用的是依赖收集和追踪而不是 ng1 的脏检测,不信自己去翻源码。Vue2 引入了 V-DOM 也只是把组件级别的更新交给了 V-DOM 而没有改变依赖收集和追踪的本质。

    另外,React 和 Vue 使用的 V-DOM 并没有解决 DOM 操作慢的问题( http://www.zhihu.com/question/31809713 ),不信我们开个 Repo 撸 ToDo List 跑 benchmark,Vue/React 随你挑,我就用原生 JS,我们比比谁写的性能更好?
    binux
        136
    binux  
       2018-03-16 13:13:27 +08:00
    @SilentDepth 这个场景并不罕见,手动维护 DOM 的时候,都是尽量手动优化,尽量少的修改 DOM。达到比 VDOM 好的性能并不奇怪。
    Ethan92
        137
    Ethan92  
       2018-03-16 13:13:57 +08:00
    楼上大佬👆
    SilentDepth
        138
    SilentDepth  
       2018-03-16 13:25:26 +08:00
    @binux #136 我说的「场景」是指那个「只修改第一行」来着。谈性能问题不能太理想化,毕竟所有需求都进行「底层优化式开发」是不现实的,也是没有(工程)意义的
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   979 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 20:12 · PVG 04:12 · LAX 13:12 · JFK 16:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.