码迷,mamicode.com
首页 > 其他好文 > 详细

vue 与jq 的对比

时间:2018-12-14 19:52:49      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:的区别   js库   别人   页面切换   增删改   模版   区别   核心   详细   

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。。。。。。。

 

vue 与jq 的对比

标签:的区别   js库   别人   页面切换   增删改   模版   区别   核心   详细   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!