前端淺談 Vue 和 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(); ，
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側重樣式操作、動畫效果等，兩者結合起來使用則會更加高效的完成業務需求
本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15577115.html