深入淺出學Vue開發：導讀
如果你看了這一篇文章，那麼相信你對這次的課程是有興趣的，同時作為撰寫者的我，也感到非常的榮幸。
程式人生
程式人生，我們選擇了這個行業，自然希望能夠在這裡走的更遠。我相信沒有任何一個人會甘於平庸，大家都希望能夠在自己所處的行業，自己所處的領域中有所建樹，希望可以實現自己的價值，獲取社會的認可。而如果要實現這個目標的話，我們將要投入更多的時間和更多的精力，才能博的更多的機會。在成長的過程中，我們不可避免的會踩一些坑，走一些彎路。那麼有沒有辦法可以讓我們少踩一些坑，少走一些彎路呢？萬幸的是，答案是有的。
站在巨人的肩膀上，我們可以看得更遠。約翰·雷西格釋出了jQuery的第一個版本，從此讓我們進入了jQuery時代。尤雨溪創造了vue，使我們正式邁入vue的時代。這些領軍者，讓我們能夠看得更遠，讓我們的工作和生活變得更加簡單。我與這些領軍者相去甚遠，微不足道，但依然希望可以儘自己的一些能力來幫助到一些人，讓大家可以少走一些彎路，少踩一些坑。懷揣著這樣一個夢想，我開了這一門課程。
框架為什麼會存在
這個世界上任何事物的存在，必然是解決了世界上的一些問題。同樣的道理，框架為什麼會存在呢？框架的存在也必然是解決了某一個或某一類的問題，這裡引入一下Vue的作者尤雨溪說過的話：框架的存在是為了幫助我們應對複雜度。框架作為一個工具用來幫助我們應對一類複雜的問題，我想這就是框架的定義了。
當然框架本身一樣存在著複雜度，就好像我們使用扳手來去擰螺絲的時候，扳手就是框架，他是一個工具，這個工具本身一樣有學習成本，只不過它的學習成本比較低，我們使用這個工具來去解決擰螺絲這樣一個如果沒有扳手會變得相當複雜的問題，這和我們使用我們的前端框架來去解決我們在工作中遇到的一個複雜專案的時候所經歷的過程是一樣的。
所以說我們就很自然的會在我們使用的框架（工具–扳手）和我們想要去解決的問題（複雜度–擰螺絲）之間進行抉擇，我們會更趨向於使用一個簡單的工具來去解決一個複雜的問題，這就是框架存在的意義了。
所以我們本能的希望我們的框架變得越來越簡單，而它能夠解決的問題越來越複雜。萬幸的是：這個時代正在按照我們的希望來發展。
主流框架
目前大家討論的比較多的前端框架主要包括了三個：
Angular
React
Vue
我們通過他們在github的Star歷史和npm的下載趨勢圖來看一下
Angular，React 和 Vue 的 Github Star 歷史
npm的下載趨勢圖
我們可以看到在Github上面，Vue的資料上升最快，並且在18年6月28日已經超過了React，成為了最受歡迎前端框架。而在npm中，React的資料遙遙領先，這得益於React強大的社群力量，我們無法否認，React社群作為當前最活躍的前端社群，提供出了特別多優秀的想法和理念，它們為React提供了強大的生態支援，同時也讓我們在選擇周邊框架的時候需要進行更多的選擇。
當然這三個框架都非常的優秀，我們不去討論它們的優劣，我們的選擇都只是基於我們的取捨：我們希望工具足夠簡單，而它可以解決的問題卻要足夠複雜。這就夠了，不是嗎？
- Angular ： Angular期望做的事情非常多，比如說它會包含著它自己的路由，這讓我們決定去使用Angular的時候，就必須要接受它的全部。這就使我們的學習成本變得更高，但同時也讓我們的選擇變得更少，有時候選擇少了並非是一件壞事，它可以讓我們更加專注。
- React與Vue：React與Vue一樣都是專注的只做介面，而其他的所有一切都會有各種配套的工具，比如說路由，或者狀態管理工具，所以說使用它們的話你可能需要做更多的選擇，而這種方式則使得它們本身（React、Vue）的學習曲線相對平緩。
從上面的分析可以看出，Angular提供了一個複雜的工具，用於解決一整套複雜的問題。而React與Vue則專注於解決一個特定的問題，而把其他的問題交給了它們的生態圈來處理，這樣做的同時也會讓我們花更多的時間來選擇合適的周邊工具。
所以說這些框架各有優劣，並沒有絕對的誰好誰壞之分。我們選擇什麼樣的工具，取決於我們面對了什麼樣的問題。沒有人會喜歡用大炮去打蚊子，也沒有人會想到用蒼蠅拍來打大象。我們喜歡剛剛好，追求事半功倍，如果你也是這麼想的，那麼至少我們的底層觀念是一致的。
Vue的特點
經過了那麼多的鋪墊，我們總算到了我們本次課程的重點：Vue。那麼Vue作為我們今天的主角，它到底有什麼魅力？為什麼值得我們花費時間去學習？我們來看一下Vue到底擁有什麼樣的特點。
我們會從以下8個方面來對Vue進行分析
1、MVVM框架
2、單頁面應用程式
3、輕量化與易學習
4、漸進式與相容性
5、檢視元件化
6、虛擬DOM（Virtual DOM）
7、社群支援
8、未來的Vue走向
（1）MVVM框架
所謂MVVM框架就是：View-ViewModel-Model，就像下面這樣
那麼這個MVVM框架，我們應該怎麼去理解呢？它的第一個View，相當於我們頁面中的DOM，最後一個Model相當於我們的資料來源，就像下面這個樣子
在這一塊程式碼中，我們的a標籤就是我們的DOM，我們的data物件就是我們的資料來源，它們兩者之間永遠不會直接通訊，它們所有的聯絡都是通過我們的ViewModel，也就是我們的監控者來進行的。我們的監控者會去負責檢測我們資料的變化，然後把我們的資料實時展示在我們的頁面中。比如說：我們把text的內容更改為“Hello Vue”的話，那麼我們a標籤中展示的內容，也會自動變為“Hello Vue”。這樣就不需要我們去手動的操作DOM，所有的對DOM操作都會通過我們的監控者來完成。如果你以前寫過複雜的DOM操作的話（比如：**.parent().parent().parent()…）,你就會發現，這種方式給你帶來的便利了。
Vue正是使用了這種MVVM的框架形式，並且通過宣告式渲染和響應式資料繫結的方式來幫助我們完全避免了對DOM的操作。
（2）單頁面應用程式
單頁面應用程式(SPA)，一般指為：一個頁面就是一個應用（或子應用）。隨著技術的發展，我們現在的前端網頁早已不只侷限於在瀏覽器上展示了，在我們的手機APP上、微信公眾號上都有了越來越多的展示機會。
那麼如果把傳統的多頁面應用形式放入到我們的手機上面會是什麼樣子呢？當我們進行頁面跳轉開啟一個新的頁面的時候，它會變成這樣
等的花兒都謝了有沒有。
而如果使用單頁面的形式來開發的話，就不會出現這樣一種情況。因為我們的整個應用就只有一個頁面，當我們的這一個單頁被載入進來之後，就不會在進行關於頁面的網路請求。Vue配合生態圈中的Vue-Router就可以非常方便的開發複雜的單頁應用。
（3）輕量化與易學習
我們知道我們網頁中引入的JS體積越大，那麼載入所需要耗費的時間就越長，反之體積越小，則越節省時間。所以我們會更傾向於使用體積更小的JS檔案，這也是為什麼我們在生產版本會引入.min的JS的原因。下面是我從Vue官網的截圖
目前Vue的最新穩定版本為2.5.16，從截圖中我們可以看到Vue的生產版本只有30.90KB的大小，幾乎不會對我們的網頁載入速度產生影響。同時因為Vue只專注於檢視層，單獨的Vue就像一個庫一樣，所以使我們的學習成本變得非常低。
（4）漸進式與相容性
漸進式框架就是：我只做為分內的事情，並且我不會對你要求太多。
Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。
這是Vue官網上面的一句話，正如我們在上面所說的，Vue只做介面，而把其他的一切都交給了它的周邊生態來做處理，這就要求Vue必須要對其他的框架擁有最大程度的相容性。
比如說：一開始你只想做一個靜態站，那麼你可以只引入Vue來去構建你的介面，過了一段時間，你想在你的網站上加入訪問網路的功能，那麼你可以再引入axios（Vue官方推薦）或者其他的（哪怕是jQuery）網路請求框架，而後來隨著你的網站越做越大，你想要把你的網站變成一個大型的web應用的時候，你可以引入一些其他你需要的JS檔案如：Loadsh.js、Velocity.js等等。
（5）檢視元件化
所謂檢視元件化就是把我們的網頁拆分為一個個的元件，就像下面這樣：
Vue允許我們通過元件來去拼裝一個頁面，每個元件都是一個可複用的Vue例項，元件裡面可以包含自己的資料，檢視和程式碼邏輯。比如說：
CSDN的這個個人資料模組，大家都已經不陌生了吧，當我們的Web應用中有多個頁面都使用到這個個人資料模組的時候，我們就可以把它封裝成一個元件，這個元件擁有單獨的程式碼邏輯、css樣式、資料等等，在任何一個我們需要使用到它的地方，就可以通過
<component-name></component-name>
Vue.component('component-name', {
...
});這種方式來直接引入了。
（6）Virtual DOM
Virtual DOM也就是虛擬DOM。大家知道瀏覽器去處理DOM的操作的時候，是存在效能問題的。這也是我們在使用jQuery或者原生JavaScript來去頻繁操作DOM進行資料渲染的時候，我們的頁面經常出現卡頓的原因。
而虛擬DOM則是預先通過JavaScript的各種運算，把最終需要生成的DOM計算出來，並且進行優化，在計算完成之後才會將計算出的DOM放到我們的DOM樹中。由於這種操作的方式並沒有進行真實的DOM操作，所以我們才會叫它虛擬DOM。
我們在前面說過
Vue通過宣告式渲染和響應式資料繫結的方式來幫助我們完全避免了對DOM的操作。
Vue之所以可以讓我們完全避免對DOM的操作，就是因為Vue採用了虛擬DOM的方式，不但避免了我們對DOM的複雜操作，並且大大的加快了我們應用的執行速度。
（7）來自社群的支援
雖然在全球中Vue的社群並沒有React社群那麼的繁華，但得益於Vue的本土化身份（Vue的作者為國人尤雨溪），再加上Vue本身的強大，所以湧現出了特別多的國內社群，比如：https://www.vue-js.com/、https://vuejs.com.cn/ 等等。這種情況在其他的框架身上是沒有出現過的，這使得我們在學習或者使用Vue的時候，可以獲得更多的幫助。
（8）未來Vue的走向
Vue是由國人尤雨溪在Google工作的時候，為了方便自己的工作而開發出來的一個庫。而在Vue被使用的過程中，突然發現越來越多的人喜歡上了它。所以尤雨溪就進入了一個邊工作，邊維護的狀態，在這種情況下Vue依然迅速的發展。
而現在尤雨溪已經正式辭去了Google的工作，開始專職維護Vue，同時加入進來的還有幾十位優秀的開發者，他們勵志把Vue打造為最受歡迎的前端框架。事實證明Vue確實在往越來越好的方向發展（從angular、React、Vue的對比圖中可以看出Vue的勢頭）。所以我覺得完全不需要擔心未來Vue的發展，至少在沒有新的顛覆性創新出來之前，Vue都會越做越好。
本課能夠幫你些什麼
說了那麼多，大家應該已經對Vue有了一個基礎的瞭解了吧。那麼我們看一下，我們這節課可以給你帶來什麼樣的幫助。
本課將從基礎語法、生態系統、專案實戰（你可以點選這裡直接訪問）。這三個部分來幫助大家詳細的瞭解Vue的知識，大家看一下下面的腦圖。
這就是我們本課將要學習的所有內容。如果你是在手機上訪問的話，也可以直接掃描這個二維碼來檢視我們的專案
大家通過本次課程可以學習到。
- vue的基礎語法
- vue的實現原理
- vue的周邊生態
- webpack模組打包器
- vue-cli腳手架解析
- 如何通過vue-cli + webpack來開發我們的自動聊天系統
因為本次課程涉及到了Vue的一些實現原理，同時我們也會對使用vue-cli + webpack構建出來的程式碼進行解析，所以需要你在學習本課程之前具備JavaScript的基礎知識，如果你已經對Vue有了一些瞭解或者已經使用Vue開發過一兩個專案的話，那麼我相信你會在這次課程裡擁有更大的收貨！
新課程《深入淺出學Vue開發》以上線GitChat，歡迎大家購買，免費部落格只會上傳部分章節。
