Vue简介

什么是Vue？

Vue是由大佬尤雨溪开发的一套构建用户界面的渐进式JavaScript框架。

构建用户界面就是将后端数据转换为用户可以看见的界面。

Vue的特点

1. 采用组件化模式，提高代码复用率，让代码更好维护

组件化 ：即将页面上的每个模块独立出来，打包成一个.vue文件。.vue文件中包含了HTML、CSS和JS文件，且该模块可以重复利用，将来别人想用这个模块时，直接引用.vue文件即可。这样n多个模块共同构成了一张网页。

2. 声明式编码，让编码人员无需操作DOM，提高开发效率
   先上图。以一个需求为例，我要将用户数据放入list容器里，以下是用命令式编码（传统JS编码）和声明式编码的对比： 这样可以很明显的看出哪一种编码方式更简单了

命令式编码：即我发出一条指令，就执行一条指令。举个例子：我有点口渴了，叫坤坤去帮我买瓶绿茶，但坤坤很笨，不知道如何去买，我得一步步告诉他：
首先你先走到马路对面，找到一个小卖部，然后进入小卖部，找到装有水的冰箱，把冰箱门打开，找到那瓶绿茶然后拿出来，再把冰箱门关上，然后走到收银员面前，把绿茶递给他扫码出库，然后把钱付给他，这样就买到了这瓶绿茶了。是不是超级复杂？
声明式编码：我发出指令，然后程序自动执行，我不用去关心它到底是怎么实现的。还是以我叫坤坤帮我买绿茶为例：我对坤坤说我渴了，帮我去小卖部买瓶绿茶，然后坤坤就直奔小卖部，买了瓶绿茶递到了我手里。我不用跟他一步步讲到底怎样做才能买到这瓶绿茶。
这就是命令式编码和声明式编码的区别。

3. 使用虚拟DOM+Diff算法，尽量复用DOM节点

虚拟DOM： 虚拟DOM即为内存中的一个数据，由Vue将其转换成页面的真实DOM。虚拟DOM向真实DOM的转换：Vue将数据转换成虚拟DOM，然后将每个数据对应的虚拟DOM转换成页面的真实DOM。
复用DOM节点：原生JS中如果有新数据增加，则会将原来的所有数据替换成新的数据。比如原来用户有蔡徐坤和陈立农，现在又新增了一个叫范丞丞的用户，现在用户有蔡徐坤、陈立农和范丞丞了。那么原生JS操作DOM的做法就是，将原来的蔡徐坤和陈立农替换成蔡徐坤、陈立农和范丞丞，有点不合常理。而Vue的做法则是在原有的蔡徐坤和陈立农的基础上，在后面再增加一个范丞丞即可。这样是不是舒服多了？
Diff算法：前面提到Vue会将每个数据转为一个虚拟DOM，那么如果数据有新增，原来拥有的虚拟DOM则会保持不变，Vue会在原有的基础上再新增一个虚拟DOM。整个过程由Vue自动去进行数据的比较，而这个比较的过程则称为Diff算法。