vue 与jq 的对比

Posted 2021-01-27 4man1woman

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