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

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

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

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

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

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

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

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

    ---

    jQuery 就是一套操作 DOM 的工具,甚至不算框架。当你需要给应用分层的时候,你依然需要基于 jQuery 封装一个「视图层」出来。看看 jQuery 和 Vue 的体积,jQuery 真的有那么大的优势吗?
        112
    aokihu   188 天前   ♥ 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 年时间开发的一个框架,难道还比不上你一个入门者的理解?
        113
    codehz   188 天前
    @aokihu #112 讲道理嘛,vue1 的时候还是没有 vdom 的,这个东西只是其中一个理由而已。。。
        114
    aokihu   188 天前   ♥ 1
    @codehz VUE1 采用的是 Angular 的理念,因此我说了不要提 Angular 了,Angular 采用的是脏数据检查,将数据与 UI 显示同步,他解决的仅仅是数据的同步问题,因此性能上面并没有提升,你可以看看当年 angular+react 的实现,速度是纯 angular 的 100 倍,而 angular2+react 的速度简直就是火箭速度,因此 VUE2 后来改用虚拟 DOM 是很明智的举措,angular 能做的其实 jQuery 有个插件也能实现
        115
    SourceMan   188 天前
    @aokihu #112
    划重点!!!》》我想说在座的各位都 TM 的是垃圾

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

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

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

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

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

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

    //举例
    有一个 10 行数据展示 然后通过 ajax 获取第一行数据 只修改第一行.
    这一个非常明确需求下 直接 callback 之后操作第一行的文字内容改变 就少了 diff 的操作了 因为人你脑直接改了啊
        132
    SilentDepth   188 天前
    @svenzhao #131 也许是你表达得不具体。就是因为 DOM 操作慢(相对于 JS 的计算速度)但又无可避免,所以才要尽可能减少 DOM 操作,而 VDOM 就是实现这个目的的一种方案。你后面的举例太不普适了,哪有那么多只需要修改确定位置元素的需求
        133
    svenzhao   188 天前
    @SilentDepth 共勉
        134
    MinonHeart   188 天前 via iPhone
    神特码 dom 慢,dom 是文档对象模型,慢个屁啊!慢的是渲染,渲染,渲染。
        135
    DaraW   188 天前 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,我们比比谁写的性能更好?
        136
    binux   188 天前
    @SilentDepth 这个场景并不罕见,手动维护 DOM 的时候,都是尽量手动优化,尽量少的修改 DOM。达到比 VDOM 好的性能并不奇怪。
        137
    Ethan92   188 天前
    楼上大佬👆
        138
    SilentDepth   188 天前
    @binux #136 我说的「场景」是指那个「只修改第一行」来着。谈性能问题不能太理想化,毕竟所有需求都进行「底层优化式开发」是不现实的,也是没有(工程)意义的
        139
    shoushou123   183 天前
    @an168bang521 能换个头像吗,你这个人长的好可怕啊,像个傻屌
    1  2  
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2044 人在线   最高记录 3762   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 20ms · UTC 15:11 · PVG 23:11 · LAX 08:11 · JFK 11:11
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1