面试的时候有被问答框架这方面的问题。问使用Vue开发和使用原生JS或jQuery开发有什么区别?或者说体验感是怎样的?
首先来谈谈这三个是个啥?
JavaScript
:是运行在浏览器的脚本语言,主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解析执行的。jQuery
:是JavaScript中的一个函数库,其实就是对原生js做了一层封装,使获取dom的操作更加简单方便,但是数据和视图层没有分开,本质上还是 要操作DOM实现逻辑。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直接安装第三方库