Vue、原生JS、jQuery在开发上有什么感受

面试的时候有被问答框架这方面的问题。问使用Vue开发和使用原生JS或jQuery开发有什么区别？或者说体验感是怎样的？

首先来谈谈这三个是个啥？

1. JavaScript：是运行在浏览器的脚本语言，主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解析执行的。
2. jQuery：是JavaScript中的一个函数库，其实就是对原生js做了一层封装，使获取dom的操作更加简单方便，但是数据和视图层没有分开，本质上还是 要操作DOM实现逻辑。
3. vue：是一套构建用户界面的渐进式框架。对js的API进行了封装，还实现了其他功能，使数据与视图层分开，通过数据驱动，操作页面视图。

体验感有何区别？

恰好都使用过这三个来进行开发过。

1. 对于DOM的处理方式：

• 对于原生js来说，肯定是什么东西都要自己去手动实现。获取DOM，操作DOM，监听数据等等，反正要写好多的好长的API。
• 对于jQuery来说，它封装了js，简化了对DOM的操作，比如说我们要获取DOM，直接$就好了。
• 对于vue来说，它使我们不用操作DOM就可以去操作页面，通过数据来驱动视图。比如要在页面中插入数据，直接{{}}（mastache语法）就好了，然后在data里设置要显示的数据。接着通过监听data里的数据来达到视图变化的效果。也就是响应式数据开发。

2. 对于用户的输入处理：

• 原生JS和jQuery基本上是先获取DOM，然后再获取里面的value，然后进行相关的操作。
• vue则可以使用v-model将用户的输入内容与实例中的data里的变量进行双向数据绑定。

3. 对于事件的处理：

• 对于原生和jQuery：还是得获取到DOM元素，比如$(‘#id’).click()
• 对于vue，采用的是v-on指令，在后面写上事件名，接着可以去methods里定义，而不用获取DOM元素

4. 对于创建新的DOM片段：

• 对于jQuery：要将DOM片段写成一个字符串再添加

var html = `<div>hhhhh</div>`;
$('#id').innerHTML = html;

• 对于vue来说，产生新的DOM可以使用重新定义组件的方式。

5. 对于css操作：

• jQuery对于css的操作也只是简化了js的语法，直接 $(‘#id’).css(key:value)
• 对于vue：css的操作也采用了绑定式的操作，使用v-bind

<div v-bind:class="{active:isActive}">
    
</div>
data:{
	isActive:true;
}

6. 对于循环DOM片段操作：

• js采用的是for循环，循环生成DOM片段
• vue采用的是v-for指令

7. 对于数据变化的监听：

• 在jQuery中需要手动写判断，当内容发生变化时将新旧内容进行对比，代码非常麻烦。
• 而在vue中可以通过watch选项来监听数据的变化。非常方便，当数据发生变化时触发一定的事件。

总结

• vue释放了DOM操作，通过操作数据来实现视图更新
• vue渲染更优雅，代码易于维护
• vue项目工程化，可以结合npm直接安装第三方库