Vue.js&jQuery比較

普遍認為jQuery是適合web初學者的起步工具。許多人甚至在學習jQuery之前，他們已經學習了一些輕量JavaScript知識。

為什麼？部分是因為jQuery的流行，但主要是源於經驗開發人員的一個錯誤的理念：因為jQuery是簡單的，所以對於初學者也很簡單適合。

jQuery提供了簡潔，不簡化

jQuery確實克服了很多舊瀏覽器問題。但是，它在封裝DOM API和JavaScript的複雜性上並沒有做太多。

鍵入 $(『#id』).click(function(event) {..}); 確實非常簡短，但是你還是需要了解一些背景知識才能寫這些代碼：DOM節點選擇，事件處理，回調等等。

如果你已經理解了DOM API和JavaScript，jQuery是簡單，但初學者不容易編寫。

Vue.js

Vue.js是JavaScript鎮上新來的小子。它的許多優勢，易於學習可能是第一。簡單已經內建於它的設計。

我斷言，初學者可以用VUE建立平常Web應用，並對他們如何工作了解得更清楚，特別是相比於他們使用jQuery構建一樣的東西。

讓我們用jQuery和vue.js實施一個非常簡單的應用程序，看看它是多麼輕量。這個案常式序將計算一個按鈕被點擊的次數，並在屏幕上顯示這個數字。

JQuery實現

<div id="output"></div>

<button id="increment">Increment</button>

var counter = 0;

$(document).ready(function() {

var $output = $(#output);

$(#increment).click(function() {

counter++;

$output.html(counter);

});

$output.html(counter);

});

它看起來很簡單，但考慮到這只是因為你是從經驗豐富的開發人員角度看。其實理解代碼實際所做的原理是相當棘手的。想想：

1. $(document).ready(function() { .. });這這30個字元包含四個棘手的概念：DOM節點的選擇、事件處理、文件的載入過程和回調。如果你沒有學會所有這些東西，那麼你不明白你剛才寫的代碼。

2.要選擇一個DOM元素實現操作並完成業務，你需要jQuery構造器$（…）。不幸的是，你不能確定到底你會得到什麼節點，你需要使用CSS3-like選擇器創建一個合適的過濾器，運行時才能確定。要做到這一點，你需要創建一個DOM複製和模擬運行你的濾波器會對它做些什麼。當你編寫更新DOM的每個方法時，你必須同樣地更新你的DOM複製和考慮如果你的過濾器仍然如預期一樣正常工作。

3.JQuery只有一個模式：選擇jQuery某樣事情，然後從API的方法做你選擇的事情。這一模式的問題是，我們現在有一個扁平的、有超過100個的方法，從AJAX到數組一維迭代。僅僅使用這麼多方法的名稱描述就能足以區分他們所做的和他們的返回的是不可能的。一個初學者理解這些串聯在一起的方法是真的需要好運。

使用Vue.js實現：

<div id="app">

<div>{{ counter }}</div>

<button v-on:click="increment">Increment</button>

</div>

new Vue({

el: #app,

data: {

counter: 0

},

methods: {

increment() {

this.counter++;

}

}

});

Vue已經解決了之前jQuery很多痛點：

1.無需擔心DOM回調，這種複雜性已經被封裝。Vue的生命周期掛鉤將允許更精確的控制，如果它需要。

2.在數據屬性counter和它渲染輸出DOM節點之間有一個明顯的之間的鏈接。無需心理DOM，你可以看到它在網頁上有保證，更新計數器不會弄亂你的DOM以意想不到的方式由於搖晃的節點選擇。不再需要DOM複製，你可以看到它在網頁上，保證更新計數器時不會由於靠不住的節點選擇以意想不到的方式弄亂你的DOM。

3.我們沒有模稜兩可的API方法需要查找或記住。不同的功能被很好的組織和分層在Vue構造函數對象中，或能通過指令直接應用到模板中的DOM節點，這些指令提供更多的易於理解的上下文。

因此，如果你已經理解JavaScript和DOM API，jQuery是容易。但這不是初學者的情況。因此，jQuery是不簡單的，只是略微簡單。

另一方面，Vue簡單內建到它的設計。對DOM API許多困難的部分進行了封裝。初學者因此可以很快編寫他們真正理解的代碼，當他們需要做更複雜的東西，Vue也會提供給他們。技術交流群627336556，技術大牛等你提問。

推薦閱讀：