Vue.js新手入門指南

昌維發表於2017-03-13
Vue.js

　　最近在逛各大網站，論壇，以及像SegmentFault等程式設計問答社群，發現Vue.js異常火爆，重複性的提問和內容也很多，樓主自己也趁著這個大前端的熱潮，著手學習了一段時間的Vue.js，目前用它正在做自己的結業專案。

　　在做的過程中也對Vue.js的官方文件以及其各種特性有了許多認識。作為一個之前以PHP+模版引擎為主的開發，從一個從未接觸過除HTML+CSS+JavaScript+JQuery以外的前端技術的人到現在可以獨立使用Vue.js以及各種附屬的UI庫來開發專案，我總結了一些知識和經驗想與大家分享。

　　下面我就以問答的形式來分享吧。這裡假設你僅僅只掌握了HTML+CSS+JavaScript，如果你對JQuery這個前端庫，以及各種後端模版語言比如說PHP，JSP還有所瞭解並且使用過的話那就太好了。

　1.Vue.js是什麼？

Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建使用者介面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單檔案元件和 Vue 生態系統支援的庫開發的複雜單頁應用。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

如果你是有經驗的前端開發者，想知道 Vue.js 與其它庫/框架的區別，檢視對比其它框架。

　　這是官網的介紹，是不是覺得非常的抽象非常的官方？看完之後可能還是有很多人不是很懂這個框架到底是用來做什麼的，什麼是“漸進式框架”？什麼是“自底向上增量開發”？什麼是“檢視層”？什麼是“單檔案元件”？什麼是“複雜的單頁應用？”第二段話裡面“響應的資料繫結和組合的檢視元件”這又是個啥？還有最後一段話，“Vue.js 與其它庫/框架的區別”究竟是什麼？

　　不要擔心，如果你慢慢看完這裡面的所有問答，一定會對前面那些可能你從未聽說過的專業術語有一種恍然大悟的感覺。

　2.Vue.js到底是什麼？

　　想必現在能看到我這篇文章的人，都是用著APP或者網頁版知乎在閱讀把。Vue.js就是一個用於搭建類似於網頁版知乎這種表單項繁多，且內容需要根據使用者的操作進行修改的網頁版應用。

　3.單頁應用程式（SPA）

　　顧名思義，單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用，比如說知乎的一個頁面就可以視為一個子應用。單頁應用程式中一般互動處理非常多，而且頁面中的內容需要根據使用者的操作動態變化。

　4.你前面說的網頁版知乎我也可以用JQuery寫啊，為什麼要用Vue.js呢？

　　講到JQuery，就不得不說到JavaScript的DOM操作了。如果你用JQuery來開發一個知乎，那麼你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結構了。

　　現在我們把一個網頁應用抽象一下，那麼HTML中的DOM其實就是檢視，一個網頁就是通過DOM的組合與巢狀，形成了最基本的檢視結構，再通過CSS的修飾，在基本的檢視結構上“化妝”讓他們看起來更加美觀。最後涉及到互動部分，就需要用到JavaScript來接受使用者的互動請求，並且通過事件機制來響應使用者的互動操作，並且在事件的處理函式中進行各種資料的修改，比如說修改某個DOM中的innerHTML或者innerText部分。

　　我們把HTML中的DOM就可以與其他的部分獨立開來劃分出一個層次，這個層次就叫做檢視層。

Vue 的核心庫只關注檢視層

　　我們為什麼要把檢視層抽取出來並且單獨去關注它呢？

　　因為在像知乎這種頁面元素非常多，結構很龐大的網頁中，資料和檢視如果全部混雜在一起，像傳統開發一樣全部混合在HTML中，那麼要對它們進行處理會十分的費勁，並且如果其中有幾個結構之間存在藕斷絲連的關係，那麼會導致程式碼上出現更大的問題，這什麼問題呢？

　　你是否還記得你當初寫JQuery的時候，有寫過$('#xxx').parent().parent().parent()這種程式碼呢？當你第一次寫的時候，你覺得頁面元素不多，不就是找這個元素的爸爸的爸爸的爸爸嗎，我大不了在註釋裡面寫清楚這個元素的爸爸的爸爸的爸爸不就好了。但是萬一過幾天之後你的專案組長或者你的產品經理突然對你做的網頁提出修改要求，這個修改要求將會影響頁面的結構，也就是DOM的關聯與巢狀層次要發生改變，那麼$('#xxx').parent().parent().parent()可能就會變成$('#xxx').parent().parent().parent().parent().parent()了。

　　這還不算什麼，等以後產品迭代越來越快，修改越來越多，而且頁面中類似的關聯和巢狀DOM元素不止一個，那麼修改起來將非常費勁。而且JQuery選擇器查詢頁面元素以及DOM操作本身也是有效能損失的，可能到時候開啟這個頁面，會變得越來越卡，而你卻無從下手。

　　當你在編寫專案的時候遇到了這種問題，你一定會抱怨，為什麼世上會有HTML這種像盜夢空間一樣的需要無數div巢狀才能做出頁面的語言，為什麼當初學JQuery看中的是它簡潔的DOM操作，現在卻一點也不覺得它有多簡潔，難道我學的是假的JQuery？為什麼寫個程式碼這麼難，你想砸電腦，你想一鍵盤拍在產品狗的腦袋上，責怪他天天改需求才讓你原本花清香茶清味的程式碼變得如此又臭又長。

　　這個時候如果你學過Vue.js，那麼這些抱怨將不復存在。

　5.Vue.js為什麼能讓基於網頁的前端應用程式開發起來這麼方便？

　　因為Vue.js有宣告式，響應式的資料繫結，與元件化的開發，並且還使用了Virtual DOM這個看名字就覺得高大上的技術。

　　可是這些名詞都是啥？

　6.響應式的資料繫結

　　這裡的響應式不是@media 媒體查詢中的響應式佈局，而是指vue.js會自動對頁面中某些資料的變化做出響應。至於是如何響應的，大家可以先把下面這段程式碼隨便貼上到一個副檔名為html的檔案然後用瀏覽器開啟，隨便在文字框裡面輸入一些文字，觀察一下頁面變化。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js測試 - 程式碼之美專欄</title>
	<!-- author:昌維 程式碼之美 https://zhuanlan.zhihu.com/codes -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" name="" value="" placeholder="在這裡輸入文字，下面會跟著變化" 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>

　　是不是會發現一個很神奇的現象，文字框裡面輸入的文字和後面的p標籤中的內容一起變化？

　　換句話說，p標籤裡面通過{{ message }}這個寫法與input標籤中的value繫結在了一起，其中變化，另外一個和它繫結的資料就跟著變化。

　　結合標題來說，就是vue.js會自動響應資料的變化情況，並且根據使用者在程式碼中預先寫好的繫結關係，對所有繫結在一起的資料和檢視內容都進行修改。而這種繫結關係，在圖上是以input 標籤的v-model屬性來宣告的，因此你在別的地方可能也會看到有人粗略的稱vue.js為宣告式渲染的模版引擎。

　7.元件化開發

　　還記得在傳統前端開發的時候，我們都是每個人做一個頁面，然後最後套入各種後端模版引擎，比如說PHP的Smarty或者Java的JSP等等。

　　但是現在我們做單頁應用，頁面互動和結構十分複雜，一個頁面上就有許許多多的模組需要編寫，而且往往一個模組的程式碼量和工作量就非常龐大，如果還按照原先的方法來開發，那麼會累死人。而且遇到以後的產品需求變更，修改起來也非常麻煩，生怕動了其中一個div之後，其他div跟著雪崩，整個頁面全部亂套，或者由於JavaScript的事件冒泡機制，導致修改一些內層的DOM事件處理函式之後，出現各種莫名其妙的詭異BUG。

　　在物件導向程式設計中，我們可以使用物件導向的思想將各種模組打包成類或者把一個大的業務模組拆分成更多更小的幾個類。在程式導向程式設計中，我們也可以把一些大功能拆分成許多函式，然後分配給不同的人來開發。

　　在前端應用，我們是否也可以像程式設計一樣把模組封裝呢？這就引入了元件化開發的思想。

　　Vue.js通過元件，把一個單頁應用中的各種模組拆分到一個一個單獨的元件（component）中，我們只要先在父級應用中寫好各種元件標籤（佔坑），並且在元件標籤中寫好要傳入元件的引數（就像給函式傳入引數一樣，這個引數叫做元件的屬性），然後再分別寫好各種元件的實現（填坑），然後整個應用就算做完了。

　8.Virtual DOM

　　現在的網速越來越快了，很多人家裡都是幾十甚至上百M的光纖，手機也是4G起步了，按道理一個網頁才幾百K，而且瀏覽器本身還會快取很多資原始檔，那麼幾十M的光纖為什麼開啟一個之前已經開啟過，已經有快取的頁面還是感覺很慢呢？這就是因為瀏覽器本身處理DOM也是有效能瓶頸的，尤其是在傳統開發中，用JQuery或者原生的JavaScript DOM操作函式對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非常卡頓。

　　而Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來並優化，由於這個DOM操作屬於預處理操作，並沒有真實的操作DOM，所以叫做虛擬DOM。最後在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。

　　對於vue.js的Virtual DOM，目前業界有著褒貶不一的評價。有人認為Vue.js作為一個輕量級框架，引入Virtual DOM會加大Vue.js本身的程式碼尺寸，也會消耗更多CPU（手機上會更耗電）（注意：消耗更多的CPU並不意味著會更卡，因為JavaScript計算是後臺計算，他的計算量還不至於讓DOM操作變得卡頓），並且在操作單個DOM元素的時候，反而多了一道計算工序，會更慢。但也有人認為基本上會用Vue.js開發的都是頁面中內容很多的元素，肯定操作的DOM量級普遍較大，平均一下還是比較划算的。

　9.我到底該怎麼用Vue.js做單頁應用開發？

　　說了這麼多，我還是不知道怎麼用它做出一個像知乎那樣的頁面啊，到底怎麼學它呢？

　　前面我們看了一個響應式的資料繫結案例，那只是一個DEMO，而且也看不出有什麼實際意義，離真正的單頁應用程式還差得遠，到底怎麼用它開發真實的專案呢？

　　我的建議是，先把介紹 - vue.js官方文件的基礎部分硬著頭皮看一遍。除了元件這個小節涉及到了很多晦澀難懂的名詞以外，前面幾章完全就是把Vue.js當作一個模版引擎來用。

　　然後開始學習ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好對Node.js也要有所瞭解。

　　最後元件部分先大致看一遍，瞭解元件裡面都有哪些概念之後，開始看網上各種實戰視訊以及文章還有別人開源的原始碼。

　10.在前面你提到過好幾次ECMAScript，這是啥？

　　ECMAScript聽名字好像和JavaScript很像，難不成他們有什麼千絲萬縷的聯絡？

　　沒錯你猜對了，他們之間還真有著很深的聯絡。

　　引用阮一峰老師的話：（ECMAScript 6入門）

要講清楚這個問題，需要回顧歷史。1996年11月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給國際標準化組織ECMA，希望這種語言能夠成為國際標準。次年，ECMA 釋出262號標準檔案（ECMA-262）的第一版，規定了瀏覽器指令碼語言的標準，並將這種語言稱為 ECMAScript，這個版本就是1.0版。

該標準從一開始就是針對 JavaScript 語言制定的，但是之所以不叫 JavaScript，有兩個原因。一是商標，Java 是 Sun 公司的商標，根據授權協議，只有 Netscape 公司可以合法地使用 JavaScript 這個名字，且 JavaScript 本身也已經被 Netscape 公司註冊為商標。二是想體現這門語言的制定者是 ECMA，不是 Netscape，這樣有利於保證這門語言的開放性和中立性。

因此，ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）。日常場合，這兩個詞是可以互換的。

　　而ECMAScript6就是新一代的JavaScript語言。

　　這裡也強烈推薦大家學習ECMAScript6的時候參考這本書ECMAScript 6入門

　11.我在學習Vue.js的時候老是聽到Webpack，這是啥？

　　Webpack是一個前端打包和構建工具。如果你之前一直是手寫HTML，CSS，JavaScript，並且通過link標籤將CSS引入你的HTML檔案，以及通過Script標籤的src屬性引入外部的JS指令碼，那麼你肯定會對這個工具感到陌生。不要緊，我們先來了解一下為什麼要用Webpack，然後帶著原因去學習就好了。

　12.為什麼要用Webpack

　　前面說了，做一個單頁應用程式本身就相當複雜，而且在做的時候肯定會使用到很多素材和別的第三方庫，我們該如何去管理這些東西呢？

　　還有前面講到了Webpack是一個前端打包工具，前端程式碼為什麼要打包呢？因為單頁應用程式中用到很多素材，如果每一個素材都通過在HTML中以src屬性或者link來引入，那麼請求一個頁面的時候，可能瀏覽器就要發起十多次請求，往往請求的這些資源都是一些指令碼程式碼或者很小的圖片，這些資源本身才幾k，下載連1秒都不需要，但是由於HTTP是應用層協議，它的下層是TCP這個運輸層協議，TCP的握手和揮手過程消耗的時間可能比下載資源本身還要長，所以需要把這些小檔案全部打包成一個檔案，這樣只要一次TCP握手和揮手的過程，就把多個資源給下載下來了，並且多個資源由於都是共享一個HTTP請求，所以head等部分也是共享的，相當於形成了規模效應，讓網頁展現更快，使用者體驗更好。

　　前面說到Webpack還有構建的功能，這就不得不提到了ECMAScript6這個新版本的JavaScript，但是現在國內外還有很多人用著老版本的瀏覽器，這些瀏覽器並不支援ECMAScript6，那麼我們的前端專案如何在這種瀏覽器上執行呢？這就需要Webpack的Loader自動載入一個轉換器來將我們寫的ECMAScript6轉換成瀏覽器能支援的老版本JavaScript語言，這個轉換器的名字叫做babel，如果你以後聽到或者看到了這個單詞，應該要知道它就是一個ECMAScript6 to 老版本JavaScript的轉換器了。這也是Webpack的構建功能。當然對前端有更深入的同學還會知道Sass，Less，stylus之類的CSS前處理器，我們也可以通過在Loader中編寫特定的規則來實現自動將這些CSS預處理語言轉換成普通瀏覽器能識別的CSS程式碼。

　　開頭的介紹提到了vue.js可以使用單檔案元件開發專案，其實也是通過Webpack將單檔案元件中的模版，樣式以及JS轉換到主頁面中

　　當然Webpack不止這點功能，它還可以通過安裝各種外掛來擴充套件，比如說熱載入技術，就是解放鍵盤的F5鍵。讓我們修改程式碼，並且按Ctrl+S儲存之後，瀏覽器頁面自動重新整理變化，不需要我們去手動重新整理，還有一些外掛可以自動新增註釋，自動給CSS程式碼加上一些瀏覽器核心對CSS3相容字首，就像webkit-xxx之類的一樣。

　13.NPM和Node.js又是什麼？它們是什麼關係？

　　首先講講Node.js。我們知道通常情況下，JavaScript的執行環境都是瀏覽器，因此JavaScript的能力也就侷限於瀏覽器能賦予它的許可權了。比如說讀寫本地系統檔案這種操作，一般情況下執行在瀏覽器中的JavaScript程式碼是沒有這個操作許可權的。如果我們想用JavaScript寫出一些能夠執行在作業系統上的，能夠具有像PHP，JAVA之類的程式語言具有的功能的程式該怎麼辦呢？Node.js就解決了這個問題。Node.js是一個服務端的JavaScript執行環境，通過Node.js可以實現用JavaScript寫獨立程式。像我們之前提到的Webpack就是Node.js寫的，所以作為一個前端開發，即使你不用Node.js寫獨立程式，也得配一個Node.js執行環境，畢竟很多前端工具都是使用它寫的。

　　NPM是一個node.js的包管理器。我們在傳統開發的時候，JQuery.js大多都是百度搜尋，然後去官網下載，或者直接引入CDN資源，這種方法太過於麻煩。如果以後遇到其他的包，這個包的程式碼本身可能還呼叫了其他的包（也稱這個包和其他的那幾個包存在依賴關係），那麼我們要在自己的專案中引入一個包將變得十分困難。現在我們有了NPM這個包管理器，直接可以通過

npm install xxx包名稱

　　的方式引入它，比如說

npm install vue

　　就自動在當前專案資料夾下匯入了這個包，並且npm自動下載好了vue這個包依賴的其他包。

　　至於有的人在按照網上的npm教程配置的時候踩坑了，發現下載速度很慢或者完全下載不了，那是因為我國有著眾所周知的原因，網上也有各種解決方法可以解決這個問題，大家多善用搜尋引擎。

　　前面提到了Webpack可以安裝各種外掛來擴充套件功能，其實也是通過這種方式擴充套件。

　　如果你學過PHP的話，NPM就和PHP裡面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。

　14.Vue-CLi又是啥？

　　它是一個vue.js的腳手架工具。說白了就是一個自動幫你生成好專案目錄，配置好Webpack，以及各種依賴包的工具，它可以通過

npm install vue-cli -g

　　的方式安裝，後面的-g表示全域性安裝的意思，意味著你可以開啟命令列之後直接通過vue命令呼叫它。

　15.我該不該學Vue.js？

　　現在Vue.js無論是發展勢頭還是作者支援還是很好的，而且它本身中文資料就比較多，教程也很多，現在隨隨便便開啟幾個和前端開發有關的知乎專欄，基本上都能見到相關文章，社群也很活躍。

　　至於你該不該學，取決於你自己，如果你當前只是做做以內容展示為主的專案，或者就是成天用各種CMS建站仿站，並且以後都不打算更換更好的工作，那麼可以暫時不用學。如果你開發的專案互動非常多，而且前後端開發都對前後端分離有很清楚的認識，那麼可以大膽的學習，並且在實際專案中運用。

　16.Vue.js怎麼火起來的？

　　關於這個問題，網上說法很多，我自己認為主要還是前些年大前端變革太快，而最近一年開始Vue.js+Webpack這個組合開始逐漸穩定下來了，而且已經有了很多中文資料。

　　對比它的競爭對手AngularJS，新舊版本專案無法平滑升級，變革太大讓使用者感覺不安穩。

　　而React本身主流推薦用的是JSX，需要額外學習一門語法（什麼？學Vue.js還要學ECMAScript6？現在ECMAScript6是趨勢，並不是因為Vue.js才要學的），並且React本身用的是render寫法編寫模版程式碼，這讓很多用習慣了Smarty等後端模版引擎得人來使用感覺很不適應，現在看來React本身在中國一些論壇社群的火爆程度還是沒有Vue.js高。

　　當然也並不是說除了Vue.js以外其他框架都很差。像知乎新版也是用React開發的，他還是有各自優秀的地方大家可以深入學習之後做出自己的判斷。

　17.我在很多地方還看到Vuex和Vue-route，它們又是什麼？

　　Vuex是vue的一個狀態管理器。用於集中管理一個單頁應用程式中的各種狀態。

　　Vue-route是vue的一個前端路由器，這個路由器不是我們上網用的路由器，而是一個管理請求入口和頁面對映關係的東西。它可以實現對頁面區域性進行無重新整理的替換，讓使用者感覺就像切換到了網頁一樣。

　　要講清楚這兩個東西，又得花費大量篇幅，所以這裡只是簡單提一下，先學好vue.js本身才是最重要的。

　18.我還在一些地方看到過Vue-resource和Axios，它們又是什麼？

　　我們在傳統的前後端不分離的開發中，後端直接把資料通過模版引擎拼接進了返回的HTML中。而現在做單頁應用程式屬於前後端分離開發，那麼這個單頁應用程式中的資料就得通過ajax的方式獲取，也要通過ajax的方式提交到後端。

　　在傳統開發中我們都是通過xmlhttprequest手動操作，或者通過JQuery的ajax方法來進行資料提交獲取。

　　vue.js本身沒有封裝ajax操作庫，所以我們要通過Vue-resource和Axios來進行ajax操作，而因為種種原因，現在vue.js2.0已經將axios作為官方推薦的ajax庫了。

　19.我該學Vue.js2.0還是1.0呢？

　　現在很多框架和語言都是學新不學舊（Python慢慢也變得如此），因此如果不是為了維護老舊專案，肯定推薦學Vue.js2.0。而且學會了Vue.js2.0，再去學習Vue.js1.0也不是什麼難事。

　20.寫Vue.js用什麼開發工具和電腦呢？

　　前端開發基本上不需要太高階的電腦都能勝任，現在這個時代是臺電腦，裝個編輯器都可以做前端開發的。

　　Vue.js的元件檔案本質上還是普通的程式碼檔案，所以各種編輯器配合一些語法檢查外掛就足夠了。我自己用的是sublime text 3，安裝一些外掛之後可以實現.vue單檔案元件高亮程式碼以及各種自動完成。Webstorm中也有類似外掛，大家可以在網上各種教學文章的指導下配置好環境。

　　我用的主題是Monokai，這個主題在大部分顯示器下長時間觀看眼睛不會很疼。我使用的顯示器是LG IPS236，部分顯示器有亮度色標調節，我這款顯示器調到2.0左右會比較舒適，過低會導致底部的茶色背景變黑，反差較大更加疲勞，過高會導致對比度不足，畫面泛白影響調色。

　結語：

　　可能包括我在內的很多人在看到Vue.js那神奇的雙向繫結優雅寫法都會有一種非常驚豔，而看到中文文件釋出之後有種想立馬學習的衝動。可惜大前端終究是大前端，如果一個對於前端各個方面沒有深入認識就想著能一步登天，肯定對不起大前端的“大”字。原本看著只想學一個Vue.js，沒想到順帶把ECMAScript6，Webpack配置，ESLint配置，bable配置，npm使用，node.js語法，以後vue全家桶中的vuex，vue-route等等等等都學了一遍。前段時間網上也流傳出了一個職位叫做Webpack配置工程師，從這裡也可以看出弄懂前端這個大雜燴確實不是那麼容易。大家一起加油，有什麼問題也可以在評論區回覆，我會抽空補充在文章內容中。謝謝各位的支援！~

相關文章