前端浅谈 Vue 和 jQuery 的区别

本文转载自查看原文 2021-11-19 14:27 142 jQuery

很多人说 Vue 和 jQuery 没有什么可比性，应该和 Angular、React 来比吧，我倒觉得它们之间没有多大的可比性，因为都是基于MVVM思想设计的框架，无非就是实现方式不一样，在不同场景下性能上会有一些差异。然而从 jQuery 到 Vue 或者说是到MVVM的转变则是一个思想的转变，是将原有的直接操作DOM的思想转变成操作数据的思想，这难道不是一个根本性的改变吗？

首先介绍一下这两个框架。

jQuery：这个曾经是最流行的Web前端JS库，即使是现在依然有很多人在使用，可是现在无论是国内还是国外它的使用率正在渐渐的被其他JS框架所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的支持实现，相信 jQuery 的使用率会越来越低。

Vue：是一个近两年兴起的前端JS库，它是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的MVVM框架如Angular、React都是大同小异，本质上都是基于MVVM的理念。然而 Vue 以他独特的优势——简单、快速、组合、紧凑、强大而迅速崛起。

jQuery 和 Vue 的对比分析：

jQuery 是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面通常是混在一起的。比如需要获取<label>标签的内容：$("lable").val(); ，它还是依赖DOM元素的值。

Vue 则是通过 Vue 对象将数据和 View 完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和 View 是分离的，它们通过 Vue 对象这个 VM 实现相互的绑定。这就是传说中的MVVM模式了。

以下举例说明一下：

场景一：向列表中添加一个元素，以下为 Vue和 jQuery 两种操作的代码，我们从中可以看出 Vue 只需要向数据message里面push一条数据即可完成添加一个<li>标签的操作，而 jQuery 则需要获取DOM元素节点，并对DOM进行添加一个标签的操作，如果DOM结构特别复杂，或者添加的元素非常复杂，则代码会变得非常复杂且可阅读性低。

Vue实现：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul> <!--根据数组数据自动渲染页面--> <li v-for="item in message">{{item}}</li> </ul> <button @click="add">添加数据</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: ["第1条数据","第2条数据"], i:2 }, methods:{ //向数组添加一条数据即可 add:function(){ this.i++ this.message.push("第"+this.i+"条数据") } } }) </script>

jQuery实现：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul id="list"> <li>第1条数据</li> <li>第2条数据</li> </ul> <button id="add">添加数据</button> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var i=2; $('#add').click(function() { i++; //通过dom操作在最后一个li元素后手动添加一个标签 $("#list").children("li").last().append("<li>第"+i+"条数据</li>"); }); }); </script>

场景二：控制按钮的显示隐藏，下面为 Vue 和 jQuery 两种操作的代码，我们从中可以看出 Vue 只需要控制属性 isShow 的值为true和false即可，而 jQuery 则还是需要操作DOM元素控制按钮的显示和隐藏。

Vue实现：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul> <!--根据数组数据自动渲染页面--> <li v-for="item in message">{{item}}</li> </ul> <button @click="add" v-show="isShow">添加数据</button> <button @click="showButton">隐藏按钮</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: ["第1条数据","第2条数据"], i:2, isShow:true }, methods:{ //向数组添加一条数据即可 add:function(){ this.i++ this.message.push("第"+this.i+"条数据") }, //控制isShow的值即可 showButton:function(){ this.isShow=false; } } }) </script>

jQuery实现：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul id="list"> <li>第1条数据</li> <li>第2条数据</li> </ul> <button id="add">添加数据</button> <button id="showButton">隐藏按钮</button> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var i=2; $('#add').click(function() { i++; //通过dom操作在最后一个li元素后手动添加一个标签 $("#list").children("li").last().append("<li>第"+i+"条数据</li>"); }); //需要手动隐藏dom元素 $("#showButton").click(function(){ $("#add").hide(); }) }); </script>

总结：

上面内容讲得都比较浅，主要就是分析 Vue 和 jQuey 的基本区别。以上两个例子只是做一个简单的说明，然而 Vue 能解决的问题远比这些要多的多，复杂的多。

Vue适用的场景：操作复杂数据的后台页面，表单填写页面等等。

jQuery适用的场景：比如说一些 HTML5 的动画页面，一些需要JS来操作页面样式的页面等等。

然而两者也是可以结合起来一起使用的，Vue 侧重数据绑定，jQuery侧重样式操作、动画效果等，两者结合起来使用则会更加高效的完成业务需求

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 浅谈Vue和Jquery的区别 Vue 浅谈前端js框架vue 浅谈 - 前台、后台、前端和后端的区别 vue和jQuery的区别 jquery和vue的区别 angular和vue还有jquery的区别 vue和jQuery的区别浅谈 vue-loader---合格前端【Vue】浅谈前端SPA（单页面应用）浅谈前端三大框架Angular、react、vue