Vue.js通俗解釋

時間 2019-11-29

原文原文鏈接

最近，實際上是一年多前了，在逛各大網站，論壇，以及像SegmentFault等編程問答社區，發現Vue.js異常火爆，重複性的提問和內容也不少，樓主本身也趁着這個大前端的熱潮，着手學習了一段時間的Vue.js，目前準備用它正在作項目，公司的。javascript

在作的過程當中也對Vue.js的官方文檔以及其各類特性有了許多認識。做爲一個以前以PHP+模版引擎爲主的開發，從一個從未接觸過除HTML+CSS+JavaScript+JQuery之外的前端技術的人到如今能夠獨立使用Vue.js以及各類附屬的UI庫來開發項目，我總結了一些知識和經驗想與你們分享。html

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

1.Vue.js是什麼？vue

Vue.js（讀音 /vjuː/, 相似於 view）是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的複雜單頁應用。java

Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。node

若是你是有經驗的前端開發者，想知道 Vue.js 與其它庫/框架的區別，查看對比其它框架。ios

這是官網的介紹，是否是以爲很是的抽象很是的官方？看完以後可能仍是有不少人不是很懂這個框架究竟是用來作什麼的，什麼是「漸進式框架」？什麼是「自底向上增量開發」？什麼是「視圖層」？什麼是「單文件組件」？什麼是「複雜的單頁應用？」第二段話裏面「響應的數據綁定和組合的視圖組件」這又是個啥？還有最後一段話，「Vue.js 與其它庫/框架的區別」到底是什麼？web

不要擔憂，若是你慢慢看完這裏面的全部問答，必定會對前面那些可能你從未據說過的專業術語有一種恍然大悟的感受。ajax

2.Vue.js究竟是什麼？vuex

想必如今能看到我這篇文章的人，都是用着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>

<head>

<title>vue.js測試 - 代碼之美專欄</title>

</head>

<body>

<hr>

<p>{{ message }}</p>

</div>

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包名稱

* 1

的方式引入它，好比說

npm install vue

* 1

就自動在當前項目文件夾下導入了這個包，而且npm自動下載好了vue這個包依賴的其餘包。

至於有的人在按照網上的npm教程配置的時候踩坑了，發現下載速度很慢或者徹底下載不了，那是由於我國有着衆所周知的緣由，網上也有各類解決方法能夠解決這個問題，你們多善用搜索引擎。

前面提到了Webpack能夠安裝各類插件來擴展功能，其實也是經過這種方式擴展。

若是你學過PHP的話，NPM就和PHP裏面的Composer差很少。也和CentOS下的yum和Ubuntu下的apt-get差很少。

14.Vue-CLi又是啥？

它是一個vue.js的腳手架工具。說白了就是一個自動幫你生成好項目目錄，配置好Webpack，以及各類依賴包的工具，它能夠經過

npm install vue-cli -g

* 1

的方式安裝，後面的-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配置工程師，從這裏也能夠看出弄懂前端這個大雜燴確實不是那麼容易。你們一塊兒加油，有什麼問題也能夠在評論區回覆，我會抽空補充在文章內容中。謝謝各位的支持！~

參考

https://blog.csdn.net/liang377122210/article/details/71545459?from=singlemessage&isappinstalled=0

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。