总结一下自己的第一个企业级的项目。
本次的项目是一个后台管理系统，分为两个列表，两个新建还有七个模板，目的为了创建并管理AUX规则和引导。技术栈是 vue + vue-cli3 + ElementUI，同时我们也试想如果用Bootstrap + jQuery做为技术选型，两者之间的差距是什么，接下来就说一说我自己对两种技术架构之间的理解。
一、两种技术的差别
1.jQuery
在2018年的7月25日，Github宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。我们可以说jQuery过时了，但是过时不代表你就一定不可以再用，或者要从现有项目中清除抛弃掉。项目维护和管理本身是另一回事情，并不是完全由技术因素决定的。
jQuery的优势
1.链式调用
2.浏览器兼容性好
3.强大的选择器，可以使用css选择器、标签等获取到想操作的元素
jQuery的劣势
1.操作DOM，钩子会依赖标签，如果改变页面结构，很多依赖标签的选择器，一改起来js的部分就得跟着大改
2.不能向后兼容。每一个新版本不能兼容早期的版本。举例来说，有些新版本不再支持某些selector，新版jQuery却没有保留对它们的支持，而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。
3.对数据的处理有很多不便利的地方，容易导致高耦合度
2.Vue
不同于jQuery，Vue用的是MVVM的架构模式，即Model-View-ViewModel 模式。让我一句话总结MVVM就是：数据驱动DOM（无需操作DOM）。MVVM 最标志性的特性就是数据绑定，MVVM 的核心理念就是通过声明式的数据绑定来实现 View 层和其他层的分离。一张图来直观的解释一下MVVM的关系。
我们在 View 层的视图模板中声明 数据绑定、 事件绑定后，在 ViewModel 中进行业务逻辑的数据处理。事件触发后，ViewModel 中数据变更， View层自动更新。因为 MVVM 框架的引入，我们只需关注业务逻辑的数据变更，MVVM 的视图引擎会帮你搞定 View。因为数据驱动，一切变得更加简单。
MVVM的优势
1.增加视图引擎和数据存取器，视图引擎会在我们改变页面上所依赖数据的时候触发视图的更新。而数据存储器可以通过Object.defineProperty()方法来定义数据，以此来完成对数据的监听、数据变更时通知更新，是数据绑定实现的基础。
2.只需要关心数据的变化，数据驱动DOM操作更加简单
MVVM的劣势
无法兼容IE8及以下浏览器
二、基于项目对两种框架的思考以及痛点分析
ps:由于本次的项目是一个后台管理系统，因此涉及到许多新建、复制、删除、数据展示、页面跳转、表单操作等行为，这其中包含了许多数据传递及赋值的过程，我们从这个角度来分析两种架构的优劣。
1.{ { } } VS DOM操作
我们进入到列表页面的时候，在Vue的created生命周期中写了一个函数用来从后台接口中获取列表页的数据，后台给我们吐出来的是一个对象，当我们使用Vue做整体架构的时候只需要在相应的标签内用{ { } }标识我们想渲染的字段就OK了。
<div>{ { data.attr } }</div> //data为后台返回的数据，attr为要渲染在该处的属性
但是，当我们使用jQuery时，我们的过程就繁琐了
①获取需要操作的DOM对象，一个页面中有许多标签，为了找到唯一的那个我们需要起许多有语义又不同的名字，是不是想想就老阔疼？！
$(' id/class/tagName... ')
②把数据塞到元素里
$(' id/class/tagName... ').html(data.attr)
2.v-model优化表单 input事件绑定
① 初始化页面时先在Vue实例中声明一个变量，它包含所有表单的字段及初始值，同时深拷贝一个作为备份，用于提交表单后对表单内容进行重置；
② 将上述提到的变量中的表单字段与页面中的输入框绑定好，之后当用户填完表单时，借助 v-model 的双向绑定变量的值也相应会自动整理妥当。待要上传时直接通过序号从变量中调取相应表单的数据提交即可。
其实v-model只是语法糖，双向绑定其实就等于单向绑定+UI时间监听，只不过Vue将过程采用黑箱封装起来了。好处就是方便，数据自动更新。而缺点就是无法得知是哪里更改了数据。
3.处理单选操作
要用jQuery获得或者修改一组radio很麻烦，需要操作checked属性；而Vue处理radio只需通过数据，数据内容就是radio的value值，修改value值radio就会自动选择目标项。checkbox也是如此，jQuery要使用checked，而Vue只需要知道checkbox绑定的data为true或者false就可以知道checkbox是否被选中。
4.弹窗上/下一条切换
弹窗的作用是用来显示点击的某条数据的详情，上/下一条数据切换其中有一个连接点就是该条数据在所有数据中的序列值
我们使用Vue，将targetIndex放到watch中监听，点击左右按钮控制targetIndex值变化并通过$emit触发父组件的方法传递上/下一条数据给弹窗，当targetIndex值变化时由于watch的存在，实时渲染
如果使用jQuery来做基础架构，会变成什么样呢？
由于jQuery没有组件化的理念，所以我们的弹窗应该是以一个div的形式使用定位，然后通过控制display来控制显示和消失，所以这样就直接在页面间传值，不需要通过vue的$emit和$on来处理了，这看起来也许简化了操作，但是如果我们有很多页面都使用了弹窗，那么我们就需要在每一个页面中都去写这样一个div会使代码冗长，而且同样的组件不具有复用性，而且每当数据变更的时候，都需要重新去赋值很不方便
ps：由于v-if/v-show的本质也是操作DOM所以就不与jQuery作对比了，v-show是控制display:block/none 而v-if的值如果是false时，会直接把DOM砍掉，开销比v-show要大，所以这两者依情况使用
总结：
jQuery完全是通过美元符号来对各种元素进行操作！根据HTML元素的id、name等属性来获取到元素并对其进行取值、赋值、修改属性能行为。
Vue的使用过程是：先绘制HTML界面，然后在需要绑定数据的地方写下v-model、v-on等这些绑定属性和方法，在显示数据内容的地方使用双大括号显示内容。然后在Vue中，el属性绑定根视图的id，data属性定义并初始化v-model、双大括号用到的数据和一些其他数据。methods属性定义在v-on中用到的和一些其他方法。更新界面修改数据实现。而修改数据通过操作界面实现。