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 ...
随机推荐
- jQuery插件select2跨域设置xhrFields参数
ajax跨越时默认不带cookie,如果需要带cookie调用,需要设置参数 xhrFields: { withCredentials: true },如: $.ajax({url : "h ...
- web测试喜事连连--草稿箱功能
“草稿箱”功能很常见吧,编辑内容后,不想发布的话,就先存为草稿.啥时候想公开了,发布即可. 今天发生个啥事呢,让作为Tester的我,哭笑不得. 开发部经理老F,反馈一个客户需求,发到群里让大家讨论. ...
- ggplot2(4) 用图层构建图像
4.1 简介 qplot()的局限性在于它只能使用一个数据集和一组图形属性映射,解决这个问题的办法就是使用图层.每个图层可以有自己的数据集和图形属性映射,附加的数据元素可通过图层添加到图形中. 一个图 ...
- JAVAEE学习day05学习,数组
容器及元素的概念 容器:是将多个数据存储到一起 元素:每个数据称为该容器的元素 数组的概念 数组:数组是长度固定,存储数据的容器,保证多个数据的类型要一致 数组定义格式及其描述 动态定义: 数据类型 ...
- 仿flash实现图片轮换播放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- node 微信授权 获取openid
node获取微信授权拿到openid 需要了解的网站 1.微信授权. 先说一下流程(一张图代替所有): 流程步骤: 1.用户同意,获取code. 2.通过code获取网页授权access_toke ...
- Java中请优先使用try-with-resources而非try-finally
Java中请优先使用try-with-resources而非try-finally Java库包含了很多需要手工调用close方法来关闭的资源.比如说InputStream.OutputStream及 ...
- Linux下安装Python3.4
PS:如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!!!! 不要动现有的python2环境! 1. ...
- AAAI 2020 | DIoU和CIoU:IoU在目标检测中的正确打开方式
论文提出了IoU-based的DIoU loss和CIoU loss,以及建议使用DIoU-NMS替换经典的NMS方法,充分地利用IoU的特性进行优化.并且方法能够简单地迁移到现有的算法中带来性能的提 ...
- ASP.NET动态网站课程设计——个人网页
时光荏苒,岁月如梭,又是学期期末时,没错,我又来补课程设计了,hhh. 本文主要讲述如何在用H5+CSS3写的静态网站的基础上,结合ASP.NET动态网站开发,制作一个动态的个人网页. 首先需要熟悉一 ...