jQuery和Vue的技术优劣对比
1、精力集中。
Jq偏重于对dom的操作,由它的函数就很容易看出来,$()、parent()、find()。我们用jq的时候经常要去考虑怎么去渲染数据,怎么从视图中取到数据,操作数据前必须对dom节点进行选取修改赋值等操作,这其实分散了我们的本该放在业务逻辑上的精力。而Vue则是基于MVVM思想,数据驱动,双向绑定,只需要定义好渲染规则,如果数据发生改变,vue会帮我们重新渲染整个页面,所以我们只需将注意力放在数据操作上就可以了。
2、代码结构。
如果你用jq没有好的代码架构,很容易就回出现一种情况就是:js里写着html元素代码,而且可能会遍布很多地方。因为增删改查你都需要对dom进行操作,这里甚至可能会写多了些冗余代码。代码架构好一点的,可能会写成一种简版框架(即有专门的渲染函数,增删改查都会调用这个函数),依然是全域的,需要闭包。而vue就没有这个问题方法全部写在methods中,提供多种钩子函数对页面渲染过成进行精准操作。
3、操作性。
用jq去操作dom实际上是蛮麻烦的。比如说又个对象数组已经渲染成表格了,这时你需要修改某一个id的那个对象的数据行,jq的话最麻烦的做法就是在遍历里面先拿到id,检查相等,相等的话,用index去拿到要改的那个dom,再重新渲染。而用vue的话,可以直接修改数据就可以了,而且你甚至可以用Array.map Array.filter ,方便快捷,提升开发效率
4、模块化。
目前无论前端还是后端开发,越来越倾向于模块化组件化,以求降低不同模块,不同功能区块之间的耦合度,便于后期业务的修改与拓展,vue完全cover上述特性,而使用jq的时候,如果你的js牛逼轰轰的写得已经超长了,然后你又觉得需要分下模块了,这时你有两选择,1是用seajs,requirejs等,2是用原生的import去管理你的代码。说实话,我没怎么用过requirejs去分模块,可能是我压根就想没到这些js要怎么分。
5、单页面实现。
单页面的实现原理估计大家都很熟了,一般是几个div在来回切换。如果一开始已经写好html,再来回切的话,html是太长了。如果用js去写又拼的很麻烦。如果你想用jq、原生实现页面切换,我能想到比较好的方式是用模版引擎...吗?但其实单页面的实现我感觉没那么简单,你不单单要考虑html能否单独写出来,还要考虑js需不需要按需加载,路由需不需要等等。。。用vue就不需要烦这些东西,vue自动构建单页应用,使用router模拟跳转。
6、组件的复用。
用vue最爽的莫过于使用别人写好的组件。目前vue的生态已经非常庞大,主流的组件库有element-ui,iview,使用主流的组件库不仅避免了我们重复造轮子,而且方便新员工快速接手项目,某个大神的组件总结:https://www.toutiao.com/i6718405521088446988/?timestamp=1564450212&app=news_article&group_id=6718405521088446988&req_id=20190730093011010018026159736CF92,其实如果你项目大的时候,有些组件(一些功能和视图的集合)可能会复用。这些相对于jq就是插件了,个人不喜欢script引入插件(任性)
7、性能。
vue使用了虚拟dom技术,能够减少 dom的操作,能提高一定的效率。
jQuery和Vue的技术优劣对比的更多相关文章
- php开发面试题---jquery和vue对比(整理)
php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...
- jquery和vue对比
1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替,随着浏览器厂商对HTML5规范统一遵 ...
- jQuery到Vue的迁移之路
背景 在前段时间做了L10的某个超复杂超多坑的三端专题之后,组里的小伙伴们一致认为是时候想办法统一一下组里的开发模式了.因为用nie那一套jQuery/zepto(下文jQuery默认包括zepto) ...
- python工业互联网应用实战18—前后端分离模式之jquery vs vue
前面我们分三章来说明了使用django template与jquery的差别,通过jquery如何来实现前后端的分离,同时再9章节使用vue.js 我们浅尝辄止的介绍了JQuery到vue的切换,由于 ...
- Vue和React的对比
今晚我们来搞一搞Vue和React的对比好吧,话不多说今天我们直接开搞可好,各位小老板,开始吧 1. react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入, 所以在react中,是 ...
- 微信小程序与传统APP十大优劣对比
随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比 ...
- queue与topic的技术特点对比
1 queue与topic的技术特点对比 Topic Queue 概要 Publish Subscribe messaging 发布订阅消息 Point-to-Point 点对点 有无状态 to ...
- jQuery和Vue的区别
1.jQuery和Vue的区别 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起 ...
- jquery的几种ajax方式对比
jquery的几种ajax方式对比 jquery的ajax方式有如下几种: 1. $.post(url,params,callback); 2. $.getJSON(url,params,ca ...
随机推荐
- jenkins操作
jenkins忘记用户名以及登录密码的解决方法 1.jenkins 根目录下找到config.xml,修改配置 <useSecurity>true</useSecurity> ...
- php 防注入
a. 打开magic_quotes_gpc或使用addslashes()函数 当php.ini里的 magic_quotes_gpc 为On 时. 提交的变量中所有的 ' (单引号), " ...
- 2019-分享数百个 HT 工业互联网 2D 3D 可视化应用案例分享
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
- c++第一章1.6
测试已完成(bingo) 1 [单选题] 下面代码能够实现交换操作的函数有( ) A. swap(int a,int b) { int t=a;a=b;b=t;} B. swa ...
- C++ 随机函数/伪随机函数
使用rand()函数时,每次随机数都是固定(伪随机数),在前面加上以下函数,每次生成的随机数为随机, srand((int)time(NULL)); rand();
- Python基础 | 日期时间操作
目录 获取时间 时间映射 格式转换 字符串转日期 日期转字符串 unixtime 时间计算 时间偏移 时间差 "日期时间数据"作为三大基础数据类型之一,在数据分析中会经常遇到. 本 ...
- Spring Cloud 系列之 Netflix Hystrix 服务监控
Actuator Hystrix 除了可以实现服务容错之外,还提供了近乎实时的监控功能,将服务执行结果和运行指标,请求数量成功数量等等这些状态通过 Actuator 进行收集,然后访问 /actuat ...
- ThinkPHP5.0 漏洞测试
ThinkPHP5.0 漏洞测试 自从ThinkPHP发布漏洞补丁以来,服务器不知道多少次受到了批量扫描漏洞来抓取肉鸡的请求 虽然官方早已发布补丁,还是想试一下TP漏洞,测试两个漏洞 一.全版本执行漏 ...
- hdu3695 AC自动机优化
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3695/ 不加last指针的AC自动机会T,原因是他费了很多功夫在跳转上,而last指针是直接直到跳转的终止位置, ...
- 数学-概率-New 21 Game
2020-02-10 13:24:26 问题描述: 问题求解: 第一次看到这个题目的时候想到的是之前做过的一条概率题,就是那个国际象棋,那条题目的做法是使用dp去对所有留在棋盘的种类进行计数,然后除以 ...