这次，面的是广州品高，面试官问我的一道题，为什么Vue会比Jquery更受开发者喜爱？煞笔如我，只回答了一些不痛不痒的答案。

先来看看我的答案：1.Vue支持数据绑定，而Jquery没有。2.Vue有中文文档，所以vue比较受中文开发者喜爱（回了这个答案估计就凉了）。3.Vue支持组件化，也就是模块化，每个组件都可以单独工作。

事后，当然是需要补救知识盲区啦。首先百度答案，基本所有的推荐文章都是互相抄袭，不够具体，还好还是有可取之处的。这些文章基本都说原因是

1.jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。

2.Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

我个人觉得这些答案都挺水的，所以我尝试去回答。

Vue其实优点挺多的，我这里就说我知道比较重要的几点。

1.Vue比JQuery减少了 DOM 操作

在这里我先提出一个问题，为什么要较少DOM操作？？？？

回答：当DOM操作影响到布局的时候，浏览器的渲染引擎就要重新计算然后渲染，越多的DOM操作就会导致越多的计算，自然会影响页面性能，所以DOM操作减少是最好的

那Vue又是怎么样减少DOM操作的呢？

Vue通过虚拟DOM技术减少DOM操作。什么是虚拟DOM？使用js对象模拟DOM，在操作过程中不会直接操作DOM，等待虚拟DOM操作完成，仅仅比较开始和结束状态虚拟DOM有哪些变换，最终根据结束状态虚拟DOM去操作DOM。至于虚拟DOM怎么比较则是采用diff算法，具体算法我也不会。不过diff算法里有一个很好的措施来减少DOM操作。

下列是diff的处理措施：

（引用于：https://blog.csdn.net/m6i37jk/article/details/78140159）

（一）、优先处理特殊场景

（1）、头部的同类型节点、尾部的同类型节点

这类节点更新前后位置没有发生变化，所以不用移动它们对应的DOM

（2）、头尾/尾头的同类型节点

这类节点位置很明确，不需要再花心思查找，直接移动DOM就好

（二）、“原地复用”

“原地复用”是指Vue会尽可能复用DOM，尽可能不发生DOM的移动。Vue在判断更新前后指针是否指向同一个节点，其实不要求它们真实引用同一个DOM节点，实际上它仅判断指向的是否是同类节点，如果是同类节点，那么Vue会直接复用DOM，例如通过对换文本内容的方式，这样的好处是不需要移动DOM。

2.Vue支持双向数据绑定

数据绑定有单向数据绑定和双向数据绑定。

什么是单向数据绑定？

单向数据绑定即一方面只受另一方面影响，却无法影响另一方面。前端常说的单向数据绑定一般都指数据影响页面，而页面不影响数据。

什么是双向数据绑定？

双向的意思即两个方面相互影响，前端来说，即数据影响页面，页面同时影响数据。例如，在 MVVM 框架中，View(视图) 和 Model(数据) 是不可以直接通讯的，在它们之间存在着 ViewModel 这个中间介充当着观察者的角色。当用户操作 View(视图)，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model(数据) 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。

举个栗子

v-model双向绑定

以上代码将input的value和页面显示双向绑定在一起。其实v-model只是语法糖，双向绑定其实就等于单向绑定+UI时间监听，只不过Vue将过程采用黑箱封装起来了。

那双向绑定有什么好处？

好处就是方便，数据自动更新。而缺点就是无法得知是哪里更改了数据。

3.Vue支持组件化

组件化的概念

Web 中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用，页面就是有一个个类似这样的部分组成，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

组件化的特性

高内聚性，组建功能必须是完整的，如我要实现下拉菜单功能，那在下拉菜单这个组件中，就把下拉菜单所需要的所有功能全部实现。

低耦合度，通俗点说，代码独立不会和项目中的其他代码发生冲突。在实际工程中，我们经常会涉及到团队协作，传统按照业务线去编写代码的方式，就很容易相互冲突，所以运用组件化方式就可大大避免这种冲突的存在、

每一个组件都有子集清晰的职责，完整的功能，较低的耦合便于单元测试和重复利用。

组件化的优点

1.提高开发效率 2.方便重复使用 3.简化调试步骤 4.提升整个项目的可维护性 5.便于协同开发

结语

由于缺乏经验，还是吃了不少亏，希望有大神愿意指点一下。

Vue为什么比JQuery更受开发者喜爱？