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
    评论
VuejQuery原生JS在组件复用方面的优缺点比较如下: Vue: 优点: - Vue具有强大的组件化开发能力,可以轻松实现组件的复用。 - Vue组件通信方便,可以通过props、$emit、$parent、$children等方式进行组件之间的通信。 - Vue的数据绑定和计算属性能够使组件的数据处理更加便捷。 缺点: - Vue的学习成本较高,需要掌握一定的Vue语法和相关技术栈。 - Vue需要引入Vue框架,对于一些简单的页面,引入Vue可能会显得过于臃肿。 jQuery: 优点: - jQuery的语法简单易懂,学习成本低。 - jQuery可以快速操作DOM元素,实现一些简单的交互效果。 - jQuery插件丰富,可以快速实现一些常见的功能。 缺点: - jQuery没有组件化开发的能力,不太适合大型项目。 - jQuery代码量较大,不太适合维护较复杂的项目。 原生JS: 优点: - 原生JS可以自由地操作DOM元素,实现各种交互效果。 - 原生JS的执行效率较高,适合处理大量数据。 缺点: - 原生JS没有组件化开发的能力,不太适合大型项目。 - 原生JS的语法较为繁琐,编写复杂的代码容易出错。 下面是具体例子: Vue组件复用: ```vue <template> <div> <HelloWorld :name="name1"/> <HelloWorld :name="name2"/> </div> </template> <script> import HelloWorld from './HelloWorld.vue' export default { name: 'App', components: { HelloWorld }, data () { return { name1: 'Vue', name2: 'React' } } } </script> ``` jQuery组件复用: ```html <div class="box"> <p>这是一个盒子</p> </div> <script> $(function () { $('.box').clone().appendTo('body') }) </script> ``` 原生JS组件复用: ```html <div class="box"> <p>这是一个盒子</p> </div> <script> window.onload = function () { var box = document.querySelector('.box') var cloneBox = box.cloneNode(true) document.body.appendChild(cloneBox) } </script> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值