詳解jquery和vue對比

2019-11-19 11:46:11

字體：大中小

來源：轉載

供稿：網友

前言：很多人說jquey和vue沒有什么可比的，應該和Angular，React來比吧，我到覺得他們倒沒有多大的可比性，都是基于mvvm思想設計的框架，無非就是實現的方式不一樣，在不同場景下性能上會有一些差異。然而從jquery到vue或者說是到mvvm的轉變則是一個思想想的轉變，是將原有的直接操作dom的思想轉變到操作數據上去，難道不是一個根本性的改變嗎？

1.jquery介紹：想必大家都用過jquery吧，這個曾經也是現在依然最流行的web前端js庫，可是現在無論是國內還是國外他的使用率正在漸漸被其他的js庫所代替，隨著瀏覽器廠商對HTML5規范統一遵循以及ECMA6在瀏覽器端的實現，jquery的使用率將會越來越低

2.vue介紹：vue是一個興起的前端js庫，是一個精簡的MVVM。從技術角度講，Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數據綁定把 View 層和 Model 層連接了起來，通過對數據的操作就可以完成對頁面視圖的渲染。當然還有很多其他的mvmm框架如Angular，React都是大同小異，本質上都是基于MVVM的理念。然而vue以他獨特的優勢簡單，快速，組合，緊湊，強大而迅速崛起

3.vue和jquey對比

jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在于可以更方便的選取和操作DOM對象，而數據和界面是在一起的。比如需要獲取label標簽的內容：$("lable").val();,它還是依賴DOM元素的值。

Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

4.舉例說明

場景一：列表添加一個元素,下圖為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>

輸出結果：