vue 与jq 的对比

vue、react和angular,众所周知,他们是前端框架的3个大佬。这篇主要想对比一下用vue和用jq的区别,至于和其他框架的对比,我想vue的官网说的更为详细。

我算是独自用vue写过一个小型项目,然后维护过一个用react写的项目。至于angular2。。。只跟着写了下官方的例子。

首先,vue是啥。。。官方说法是---   Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

这里就有两个疑问了,什么是渐进式框架,什么是自底向上逐层应用。

首先渐进式框架,你可以理解为vue(单单只是vue)是一个“核”,它尽可能的将自己精简,只保留核心功能,然后其他的功能再视情况拓展。举个例子就是:

一开始,你可以只把vue当做一个js库,像一个js插件那样使用。我以前也试过想用它来装装X,强行把它放到一个项目中使用,只把一个列表渲染出来。

然后,你用了后发现,哎?这种数据驱动的方式蛮舒服的。这时你就想把整个项目都用vue来做了。

再后来,你又想用个vue-router去做一下单页面。(vue-router已经不是核心的功能了,是拓展的)

再后来,你发现数据的流转有点长了,于是想用 vuex去管理一下数据。(再拓展)

再到SEO..blablabla

可以看到,vue可以逐步的去完成一个中大型项目的搭建,功能是渐进增加。这就是渐进式了。。

至于逐层。。。。。。感觉和渐进式差不多,我没有去查。

说了这么一大堆,终于到了vue和jq的区别了。或者说,我为啥要用vue啊,还要学,又有全家桶,又blablabla.....

别急施主,请听我细细道来。。。

1、精力集中。Jq偏重于对dom的操作,由它的函数就很容易看出来,$()、parent()、find()。我们用jq的时候经常要去考虑怎么去渲染数据,怎么从视图中取到数据,这其实分散了我们的本该放在业务逻辑上的精力。而Vue则是数据驱动的,可以理解为我们需要先定义一种数据到视图的渲染规则,之后如果数据发生改变了,vue会帮我们重新渲染,所以我们只需将注意力放在怎么修改数据上就可以了。

2、代码结构。如果你用jq没有好的代码架构,很容易就回出现一种情况就是:js里写着html元素代码,而且可能会遍布很多地方。因为增删改查你都需要对dom进行操作,这里甚至可能会写多了些冗余代码。代码架构好一点的,可能会写成一种简版框架(即有专门的渲染函数,增删改查都会调用这个函数)。而vue就没有这个问题。
3、操作性。用jq去操作dom实际上是蛮麻烦的。比如说又个对象数组已经渲染成表格了,这时你需要修改某一个id的那个对象的数据行,jq的话最麻烦的做法就是在遍历里面先拿到id,检查相等,相等的话,用index去拿到要改的那个dom,再重新渲染。blablabla…而用vue的话,可以直接修改数据就可以了,而且你甚至可以用Array.map Array.filter 美滋滋~
4、模块化。使用jq的时候,如果你的js牛逼轰轰的写得已经超长了,然后你又觉得需要分下模块了,这时你有两选择,1是用seajs,requirejs等,2是用原生的import去管理你的代码。说实话,我没怎么用过requirejs去分模块,可能是我压根就想到这些js要怎么分。但vue的话我感觉模块和组件差不多,各个页面可以是一个模块,页面里面的某一块也可以是一个模块,我觉得vue维护起来比jq要容易得多。
5、单页面实现。讲真,单页面的实现原理估计大家都很熟了,一般是几个div在来回切换。如果一开始已经写好html,再来回切的话,html是太长了。如果用js去写又拼的很麻烦。如果你想用jq、原生实现页面切换,我能想到比较好的方式是用模版引擎...吗?但其实单页面的实现我感觉没那么简单,你不单单要考虑html能否单独写出来,还要考虑js需不需要按需加载,路由需不需要等等。。。用vue就不需要烦这些东西。
6、组件的复用。用vue最爽的莫过于使用别人写好的组件。UI组件我那个项目用的是element UI,其实如果你项目大的时候,有些组件(一些功能和视图的集合)可能会复用。这些相对于jq就是插件了,我就是不爽用script引入插件怎么了嘛?
7、性能。vue使用了虚拟dom技术,能够减少 dom的操作,能提高一定的效率。

最后,我为vue打call。。。。。。。

原文地址:https://www.cnblogs.com/4man1woman/p/10120773.html

时间: 2024-11-09 00:10:48

vue 与jq 的对比的相关文章

vue 结合JQ ajax 作用域会改变

简单的数据表格的功能,   用到了vue 和JQ // 获取搜索 提示 数据 getData: function() { $.post(searchTipUrl, { q: this.q }, function(data) { this.serachUl = true; // 这里的this 不是vue 的了 this.myData = data; // console.log(_self.myData.length); }) }, // 获取搜索 提示 数据 getData: function

vue和react全面对比(详解)

vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库. 区别: a.优化 b.HTML&CSS c.构建工具 d.数据绑定 e.状态管理 f.路由 g.渲染性能 h.数据更新 i.开发模式及规模 j.使用场景 k.服务器端渲染(SSR) l.扩展(高阶组件和mixin) 1.都使用虚拟DOM vue:Vue在2.0

vue和jquery的对比

这一段时间在学vue,也被称为前端框架的三马车之一,是一套用于构建用户界面的渐进式框架,也是入门难度最低的一种框架.今天将vue和之前学的jquery来对比一下. Jquery介绍:jquery是一个快速的,简洁的JavaScript框架,于2006年由John Resig发布,倡导的是写更少的代码,去做更多的事.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互.简而言之,jquery就是一个JavaSc

vue加jq的下拉加载总结

先贴代码.要想做下拉加载 ,那么就有一个得先判断在什么时候去加载.我做的判断是当底部离页面还有100左右是我就设置加载.所以,我先获取所有的li列表.然后设置body的高度,拿到body高度,在拿到网页滚动过的高度.把列表的高度减去body加滚动过的高度.就是底部离页面的距离高度. 使用vue的钩子函数,不懂得可以先看vue文档.然后在使用监听滚动条的事件.其他一切看代码. 原文地址:https://www.cnblogs.com/dongfangtaling/p/9146228.html

vue引入jq插件

今天做官网,把unslider做成指令,但是一直提示$(el).unslider() no a function,一开始我想复杂了,后来在网上看了很多帖子,大多数都是修改webpack.base.config.js,仔细尝试,网上确实是对的,尝试过程中,提醒大家最好把这3个加全,比如unslider插件,(function(){})(window.jQuery) { jQuery: "jquery", "window.jQuery": "jquery&qu

Vue.js与React的全面对比

Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两个框架的认知. 1.数据绑定 1.1 Vue中有关数据绑定的部分 vue是双向绑定, Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.这是通过设置属性

Vue新手村任务之任务前言

在新手村,不讲Vue原理实现,不讲这个东西这么来的,直说快速说使用通关方法,可能会拿JQ做对比(这个纯看个人心情)  新手村任务做完之后可获得   使用vue熟悉的资格. 这个Vue新手村,在进村之前,必须的掌握的技能有:1.了解JS的作用域.闭包和原型链 2.必须得会写静态页 3.有一定的JS基础  不满足这三点的  建议去看JS高级程序设计  再多写几张网页就可以了. 原文地址:https://www.cnblogs.com/qiaohong/p/9406736.html

第三篇:Vue指令

Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉( 123 会被num替换) v-html可以解析渲染html语法的内容 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> <!-- eg:原文本会被msg替换 --&g

vue渲染数据后与owlCarousel轮播插件冲突,失效

主要原因:dom解析准备完成后,开始执行$(document).ready(); 而vue是在window.onload(页面加载完后才执行):所以会导致owlCarousel插件失效. 解决方案:数据渲染后,更新dom:再调用插件.(vue的 this.$nextTick可以更新dom) 1.引入owlCarousel插件,vue,jq (function ($) { new Vue({ el: '#owl-demo1', data:{ aboutData:[], getRouteUrl: '