前端淺談 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