一、目前整個前端技術棧的情況
Vue是一個前端技術，所以在學習Vue之前，我們先來了解一下整個前端技術棧的技術和層次（作爲一個後端談前端，有一些不專業的地方，還望指出）：
1、Html5+Css3+Jquery
這是目前前端最基礎的技術棧，也就是我們要實現一個前端頁面，至少要掌握的基礎，Html和Css是前端頁面元素和樣式的基礎語言，而Jquery可以理解爲使用JavaScript封裝起來的腳本函數庫，如果很精通JavaScript，使用Jquery自然很得心應手。
目前純粹使用這種組合技術的公司很少，一般都會配合第三方框架來實現，主要是爲了趕工期哈哈哈。
2、Augular、Vue、React
這三個框架都有很好的性能，都支持數據綁定，組件等基本功能。這裏所討論的框架都是基於組件的。一個組件得到一個輸入，並且在一些內部的行爲/計算之後，它返回一個渲染的 UI 模板（一個登錄/註銷區或一個待辦事項列表項）作爲輸出。React 和 Vue比較擅長處理組件，Angular提供了關於如何構建應用程序的強有力的約束，並且還提供了更多開箱即用的功能。一般Vue、React經常用於中小型，或一些大型項目，而
Angular因爲比較厚重,一般多用於大型項目。
目前大部分互聯網公司都會使用這三個框架中的其中一種，例如滴滴出行、餓了麼、小米移動商城等使用的是Vue，阿里和知乎的評論功能使用的是React和React-native，廣發證券，中興軟創，海爾日日順等公司使用的是Angular 2（2016年統計）。
3、Node.js
Node.js是一項服務器技術。我們都知道客戶端提出服務請求，而服務器端負責處理請求並提供服務。而對於互聯網來說，在Node.js之前JavaScript是一項完全的客戶端技術，被用於瀏覽器中實現各種動畫，對DOM的操作等等。而後端，即服務端則是由PHP、Python、Ruby、Java等等語言來實現。Node.js的出現，使得前後端使用同一種語言，統一模型的夢想得以實現。
說白了，就是Node.js可以實現服務器的功能。目前大搜車的主app後臺、淘寶數據魔方等產品都使用了Node.js作爲服務後臺。
有一個共識就是，當一個前端開發人員學會了Node.js之後，就可以稱自己爲“全棧工程師”（前端+後臺一人搞定）了，哈哈。
PS：我自己會Java後臺，我又懂一部分前端，我是不是也可以叫自己“僞全棧”了（滑稽）？
4、混合app開發（Ionic、ReactNative等）
混合app開發即在原生的Android（安卓）、IOS（蘋果系統）智能手機系統的APP應用上，嵌入HTML等網頁技術，實現原生與HTML的混合。因爲原生APP的開發需要花費大量的時間和開發成本，所以一般都採用緩和開發的模式，來實現大的提高開發效率和開發成本，是APP目前的主流開發方式。當然也有一些純HTML5的移動應用，外面套了一個APP的殼子。
Io是nic基於Apache Cordova的混合移動應用開發方案 。其優勢在於可以用前端開發的標準技術：HTML、JavaScript 和 CSS 來開發移動應用。Ionic 也提供了豐富的組件來簡化移動應用開發。這些組件在不同的平臺上有類似原生組件的外觀。Ionic 也可以通過 Apache Cordova 與底層系統進行交互，調用電話簿和攝像頭等原生功能。
React Native實現了只使用JavaScript也能編寫原生移動應用的效果，它在設計原理上和React一致，通過聲明式的組件機制來搭建豐富多彩的用戶界面。使用React Native，可以編寫一次代碼並多次部署到Android和iOS操作系統。對於一些創業公司來說，這樣可以節省成本，併爲程序員騰出時間完成其他重要任務。
以上就是目前整個前端技術棧的情況，這可以讓我們對整個前端生態有一個大致的瞭解，讓我們清楚即將學習的Vue技術在前端技術棧的定位。
二、Vue介紹及其解決的痛點
Vue是一個基於JavaScript的前端框架，是一個國產框架，作者是尤雨溪（著名漸進式 JavaScript 框架 vuejs.org 的創造者）。
Vue是一個單頁面框架，基於模塊化和組件化的開發模式，其特點就是簡單、靈活、高效，在國內的很多中小企業使用的特別多。
說了那麼多大、空、虛的詞，可能大家還是不知道Vue到底是幹啥的，這裏我們就要先從Vue的兩個大特點說起，分別是“基於視圖層的框架”和“MVVM模式”。
1、MVC模式以及其缺陷
很多童鞋可能不知道“MVVM模式”是啥，但是提到“MVC模式”一般都是知道的，“MVC”設計模式就是model，view，control，即數據模型、視圖層、控制層，像Jquery就是這種模式：
我們可以理解爲網頁上的一個個諸如Div的DOM元素爲“View視圖”，而改變DOM元素屬性或值的數據來源方（如Ajax從服務器獲取數據），可以理解爲“model數據模型”，而使用諸如Jquery之類的腳本去實現頁面動態交互，通過事件機制來響應用戶的交互操作（例如用戶點擊按鈕之後彈出一個對話框，或修改了標籤中的值），即爲control層。
而傳統的“MVC模式”有什麼缺點呢？其實最大的缺點就是control層承擔了太多的針對View層的交互操作邏輯。例如找某個被嵌套了很多層的Div元素的父級元素，使用Jquery時可能會出現“$ (’#xxx’).parent().parent().parent()”這種寫法，如果後期在中間層又多出了其它層的父級元素，這個代碼還要修改。相類似這種關聯和嵌套的DOM元素，會隨着頁面的複雜度提高而提高，到時候這些複雜元素的修改將會變得特別困難，甚至牽一髮而動全身。
2、MVVM模式以及解決的問題
而Vue的最強大之處就在於解決了上面control層過重的問題。對於Vue而言，它只關心的是視圖層，即把HTML中的DOM與其他的部分獨立開來劃分出一個層次，來去處理他。Vue不去關心DOM元素的複雜結構，而是考慮的是數據該如何儲存。這一點正是利用了“MVVM模式”的設計理念。
在“MVVM模式”中，control層被替換爲了“ViewModel”層：
ViewModel是幹嘛的？它實現了View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動操作Dom元素，來改變View的顯示，而是改變屬性後該屬性對應View層顯示會自動改變。我們可以理解爲我們只需要調整元素屬性，剩下的DOM操作由框架來幫我們搞。這不就解決了我們上面說的問題了？下面就說說Vue是怎麼具體解決這些問題的。
3、Vue的優點
Vue有“聲明式、響應式的數據綁定”、“組件化的開發”和“Virtual DOM”三大優點：
（1）聲明式、響應式的數據綁定
使用傳統的JQuery或者原生的JavaScript操作一個DOM元素，需要先獲取該DOM元素對象，然後再對這個對象進行相應值的修改等操作。而Vue只需要先把要修改的值綁定到js對象（例如一個包含多個子元素的大模塊只需要分配一個js對象）上，然後修改這個js對象的值，此時Vue框架就會自動把DOM元素的值進行更新，我們只需要關心js對象值的修改，不需要關心DOM操作。
例如下面這個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js測試</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" value="" v-model="message">
<hr>
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
效果：
我們在input中輸入文字的時候，下面p標籤中的內容會同步出現。這裏就是將p標籤中的值與js對象進行了綁定，這裏的js對象是以id爲app的整個Div和其子元素作爲一個整體組件來生成的。
這裏，DOM元素跟隨js對象值的變化而變化叫做單向數據綁定，如果js對象的值也跟隨着DOM元素的值的變化而變化就叫做雙向數據綁定。
（2）組件化的開發
一個單頁的移動端的應用，往往會有很多個模塊需要編寫，而這些模塊又沒有什麼明顯區分，如兩個Div實現的是類似的效果，但是爲了保證不同模塊下的邏輯是不同的，需要給每個功能相似單控制不容的元素起各種各樣的名字，來避免邏輯串模塊，有時候光input可能就要起好幾個名字，例如上面模塊是供應商收款信息，下面模塊是供應商付款信息，兩個input都要顯示供應商名字，但id又不能重讀，那隻能起名類似supplierName1、supplierName2的名字。如果是多人共同開發一個單頁面，這樣的問題會更多。
Vue引入了組件化開發的思想，把一個單頁應用中的各種模塊拆分到一個一個單獨的組件（component）中，我們只需要爲該模塊的父級應用設置一個js對象（標籤爲該父級元素的id），然後在組件標籤中寫好要傳入組件的參數（就像給函數傳入參數一樣，這個參數叫做組件的屬性），然後再分別寫好各種組件的實現就可以了。
例如剛剛說的供應商收付款的場景，通過Vue可以實現爲：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js測試</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
供應商名稱：<input type="text" value="" v-model="message">
<br/>
付款信息：<p>{{ message }}付款1000元</p>
</div>
<hr>
<div id="app2">
供應商名稱：<input type="text" value="" v-model="message">
<br/>
收款信息：<p>{{ message }}收款2000元</p>
</div>
<script type="text/javascript">
var app1 = new Vue({
el: '#app1',
data: {
message: '嘉龍化工廠'
}
})
var app2 = new Vue({
el: '#app2',
data: {
message: '千禧塑料廠'
}
})
</script>
</body>
</html>
效果：
此時我們只需要修改每個父級js對象下的message即可，程序員A對app1以及下面的元素進行修改，不影響程序員B對app2下元素的修改，即使值的名字一樣，也只和綁定的父標籤有關係。這樣就實現了DOM元素與js對象值進行打包綁定。
（3）Virtual DOM
Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來並優化，由於這個DOM操作屬於預處理操作，並沒有真實的操作DOM，所以叫做虛擬DOM。最後在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。此邏輯是爲了解決瀏覽器不停渲染DOM樹導致的卡頓，也是解決DOM性能瓶頸的一種方式。
這個涉及到Vue的處理內核邏輯，這裏先不做展開，瞭解即可。
至此，我們從前端整體技術棧情況。MVC存在的問題，MVVM解決的問題、Vue的介紹以及解決的痛點，讓大家對Vue有了一個基礎的認識。下一篇我們來通過搭建Vue的環境，來學習如何使用Vue。
參考：
《IT營：itying.com-2018年Vue2.x 5小時入門視頻教程》
https://blog.csdn.net/weixin_41879988/article/details/81638474
https://blog.csdn.net/weixin_41646716/article/details/81562583
https://www.zhihu.com/question/33578075/answer/122448279
https://blog.csdn.net/valada/article/details/79909231
https://blog.csdn.net/qq_37774171/article/details/87093678
轉載請註明出處：https://blog.csdn.net/acmman/article/details/106744408