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直接安装第三方库
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值