jQuery这个诞生于2006年的js类库,因为它强大的选择器大大解决了许多前端小白取不到元素的痛、链式操作使得jQuery代码简洁优雅、丰富的插件支持让可扩展性相当高、轻量又不会污染顶级变量的优点,曾经风靡一时。但长江后浪推前浪,于2013年尤雨溪个人开发的Vue框架,现在已然成为全世界三大前端框架之一。那么Vue到底有什么优势能够脱颖而出呢?总的来说,Vue的核心优势就是减少DOM操作、双向数据绑定和组件化3个方面。

一、减少DOM操作。

从jQuery到Vue,是前端思维的转变,从传统的直接操作DOM元素转变为操作虚拟DOM,这是Vue较jQuery乃至原生JS,更具优势的一个原因。
那么什么叫做直接操作DOM元素?什么叫操作虚拟DOM?虚拟DOM的优势是什么?

  • jQuery直接操作DOM元素,是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。每次对元素处理的前提都是先取到元素,DOM操作较多。
  • Vue操作虚拟DOM,是在Vue类下面新建对象模拟DOM元素,在操作过程中对数据进行处理而不是直接操作DOM元素,当数据处理完成后,仅仅比较开始和结束状态虚拟DOM有哪些变换,最终根据结束状态虚拟DOM去操作DOM。
  • 虚拟DOM的出现将前端的工作从操作元素为主转变为处理数据,减少了DOM操作,减少浏览器的渲染引擎的工作量,渲染更快,大大解决了前端性能优化的难题。

二、双向数据绑定。

数据绑定分单向数据绑定和双向数据绑定。传统的单向数据绑定一般是数据影响页面,而页面不影响数据。Vue在MVVM框架中的双向数据绑定通过v-model实现(在 MVVM 框架中,View(视图,也就是常说的页面) 和 Model(数据) 不可以直接通讯),使得视图和数据可以根据一方的改变自身做出相应改变。最直观的就是,在Vue中数据改变,视图无需刷新即可实时改变,而jQuery中数据改变,视图需要用户手动刷新才会改变。

三、组件化。

Vue组件具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用,简单来说,就是将页面的功能等需求进行划分成多个模块,可以根据需求增减,同时不影响整个页面的运行。在工作中,有这方面的需求时,可以自己写组件进行重复使用,还可以从网上获取相应组件,也可以对别人封装的组件进行二次封装等等。Vue组件的优势就是组件进行重复使用,便于协同开发,提高开发效率。

总的来说,jQuery和Vue的关系并非你死我活,各自都有不同的侧重点。jQuery侧重样式操作,动画效果,而Vue侧重数据绑定。大家可以根据需求进行结合使用。

Logo

前往低代码交流专区

更多推荐