簡(jiǎn)介

“簡(jiǎn)單卻不失優(yōu)雅，小巧而不乏大匠”。

2016年最火的前端框架當(dāng)屬Vue.js了，很多使用過(guò)vue的程序員這樣評(píng)價(jià)它，“vue.js兼具angular.js和react.js的優(yōu)點(diǎn)，并剔除了它們的缺點(diǎn)”。授予了這么高的評(píng)價(jià)的vue.js，也是開(kāi)源世界華人的驕傲，因?yàn)樗淖髡呤俏恢袊?guó)人–尤雨溪（Evan You）。

Vue.js 是一個(gè)JavaScriptMVVM庫(kù)，是一套構(gòu)建用戶界面的漸進(jìn)式框架。它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的，采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js；同時(shí)比起 React + Redux 相對(duì)復(fù)雜的架構(gòu)，Vue.js 更加輕量級(jí)也更加容易上手，是初創(chuàng)項(xiàng)目的首選前端框架。Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。并且作者是華人的關(guān)系，Vue擁有著對(duì)華人開(kāi)發(fā)者最友好的api文檔和官方教程。

調(diào)試插件

在vue調(diào)試方面，可以選擇安裝chrome插件vue Devtools。打開(kāi)vue項(xiàng)目，在console控制臺(tái)選擇vue面板。在Devtools工具中，可以選擇組件，查看對(duì)應(yīng)組件內(nèi)的數(shù)據(jù)信息。也可以選擇Vuex選項(xiàng)，查看該項(xiàng)目?jī)?nèi)Vuex的狀態(tài)變量信息。

UI組件庫(kù)

在vue組件庫(kù)方面，個(gè)人不推薦使用UI組件庫(kù)，畢竟自己造輪子的過(guò)程還是很有成就感的。當(dāng)然，如果更重視開(kāi)發(fā)效率，并且選擇了vue2.0作為前端框架，那么餓了么推出的Element組件就是一個(gè)很不錯(cuò)的選擇。其github項(xiàng)目（https://github.com/ElemeFE/element）更新比較頻繁，雖然項(xiàng)目會(huì)有些不穩(wěn)定，但是目前為止element就是最好的支持vue2.0的UI組件。就像它的口號(hào)一樣，“快速成型，就為讓你少加班”。

vue、React、Angular1對(duì)比

性能對(duì)比

在Angular1中，在scope作用域中每一次數(shù)據(jù)變化，會(huì)觸發(fā)watcher的重新計(jì)算，angular對(duì)常用的dom事件，xhr事件等做了封裝， 在里面觸發(fā)進(jìn)入angular的digest流程。在digest流程里面，會(huì)從rootscope開(kāi)始遍歷， 檢查所有的watcher。并且，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。Vue則沒(méi)有這個(gè)問(wèn)題，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步隊(duì)列更新，數(shù)據(jù)的變化都是獨(dú)立處罰的，除非數(shù)據(jù)之間有明確的依賴關(guān)系。
vue官方宣稱vue的渲染性能優(yōu)于react。為了有理有據(jù)讓人信服，vue開(kāi)發(fā)團(tuán)隊(duì)建立了一個(gè)簡(jiǎn)單的對(duì)比性能的項(xiàng)目（https://github.com/chrisvfritz/vue-render-performance-comparisons），它負(fù)責(zé)渲染10000個(gè)列表項(xiàng)100次。Vue官方將每一個(gè)參照項(xiàng)目都分別運(yùn)行 20 次并取最好的結(jié)果結(jié)果如下圖：

由此可見(jiàn)，Vue的性能是遠(yuǎn)好于Angular1，并且稍微優(yōu)于React的。

社區(qū)拓展對(duì)比

Angular1的背后是Google，所以社區(qū)基礎(chǔ)是不需要擔(dān)心的，從Tutorial到StackOverflow的問(wèn)題數(shù)量都可以反映出生態(tài)系統(tǒng)很完整。Angular1之后的2.0版本幾乎是一個(gè)推翻重做的框架，對(duì)于使用了1.X版本的項(xiàng)目，想要平滑的升級(jí)過(guò)渡到2.0版本應(yīng)該是非常困難的?，F(xiàn)在Angular2的線上應(yīng)用數(shù)量還不算太多，主流編碼還是以1.X版本居多。這個(gè)版本化巨大的差異也間接影響到了開(kāi)發(fā)者對(duì)于angular的信心。

Vue和React都有強(qiáng)大的社區(qū)支持。React有狀態(tài)管理庫(kù)Flux、ReduxVue，相應(yīng)的，Vue有vuex。Vue 和 React 都提供了強(qiáng)大的路由庫(kù)來(lái)應(yīng)對(duì)大型應(yīng)用。然而Vue的路由庫(kù)和狀態(tài)管理庫(kù)都是由官方維護(hù)支持的。React 則是選擇把這些問(wèn)題交給社區(qū)維護(hù)，因此創(chuàng)建了一個(gè)更分散的生態(tài)系統(tǒng)。但相對(duì)的，React 的生態(tài)系統(tǒng)相比 Vue 更加繁榮。此外，Vue 提供了Vue-cli 腳手架，包括了Webpack，Browserify，甚至路由庫(kù)，能讓你非常容易地構(gòu)建項(xiàng)目。

學(xué)習(xí)陡峭度對(duì)比

在指令與組件方面，Vue中將指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個(gè)自給自足的獨(dú)立單元，有自己的視圖和數(shù)據(jù)邏輯。在 Angular1 中兩者有不少相混的地方。在API與框架設(shè)計(jì)方面，angular1都比vue要復(fù)雜的多。就個(gè)人感覺(jué)而言，angular1和React的學(xué)習(xí)曲線會(huì)相對(duì)陡峭一些，而vue的編碼方式會(huì)更趨近于前端開(kāi)發(fā)者的編程習(xí)慣。
因?yàn)関ue的作者是中國(guó)人，vue的官方網(wǎng)站、教程和api肯定是最完善、最易懂的。此外，每次大版本的發(fā)布，都會(huì)伴隨著詳盡的遷移說(shuō)明文檔，包含了很多詳盡的闡述以及許多遷移的例子，甚至還有遷移工具。Angular的開(kāi)發(fā)團(tuán)隊(duì)你們就不覺(jué)得臉紅么…

Vue的使用非常的簡(jiǎn)單，創(chuàng)建一個(gè)本地的 .html 文件，然后通過(guò)如下方式引入 Vue：

這樣就生成了vue的hello world應(yīng)用。

渲染能力對(duì)比

ReactNative能使你用相同的組件模型編寫(xiě)有本地渲染能力的 APP（iOS 和 Android）。能同時(shí)跨多平臺(tái)開(kāi)發(fā)，對(duì)開(kāi)發(fā)者是非常棒的。為了彌補(bǔ)這方面的不足，在2016年9月舉辦的JSConf2016期間，vue.js的作者尤雨溪宣布加盟Weex團(tuán)隊(duì)擔(dān)任技術(shù)顧問(wèn)，雙方將進(jìn)行更緊密的合作，共建開(kāi)發(fā)生態(tài)圈。Weex 是阿里的跨平臺(tái)用戶界面開(kāi)發(fā)框架，Weex 的 JavaScript 框架運(yùn)行時(shí)用的就是 Vue。在此之后，在 Weex 的幫助下，使用 Vue 語(yǔ)法開(kāi)發(fā)的組件不僅僅可以運(yùn)行在瀏覽器端，還能被用于開(kāi)發(fā) iOS 和 Android 上的原生應(yīng)用。

Vue.js 的作者尤雨溪表示：“Weex選擇Vue作為其JavaScript運(yùn)行時(shí)框架是讓我非常高興的一件事。Vue的組件開(kāi)發(fā)模式已經(jīng)被web開(kāi)發(fā)者社區(qū)廣泛 認(rèn)可，而把Vue的開(kāi)發(fā)體驗(yàn)拓展到原生平臺(tái)則是我一直想做但沒(méi)有余力去做的事情。一想到Weex將能讓開(kāi)發(fā)者們用Vue的語(yǔ)法去寫(xiě)跨 Web/Android/iOS三端的通用組件，就讓我很興奮?！?/p>

vue的缺點(diǎn)

Vue就這么好，難道沒(méi)有缺點(diǎn)嗎？當(dāng)然有，vue雖然在16年非?；鸨窍啾扔赼ngular和react，不論是成熟度還是社區(qū)活躍度都還不是對(duì)手。此外，Vue明確聲明了自己放棄了對(duì)IE8的支持。再看看現(xiàn)在的招聘網(wǎng)站上，有多少寫(xiě)了需要有angular經(jīng)驗(yàn)，而又有多少寫(xiě)了需要vue經(jīng)驗(yàn)，就可見(jiàn)vue的影響力相比于angular和react還差的很遠(yuǎn)。

vue全家桶及項(xiàng)目架構(gòu)

Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上構(gòu)建工具vue-cli，就是一個(gè)完整的vue項(xiàng)目的核心構(gòu)成。

vue-router路由

推薦使用npm工具來(lái)安裝vue-router

npm install vue-router 

通過(guò)import導(dǎo)入并定義Vue模塊、vue-router模塊和需要使用的組件，在本例中，分別是Goods、Ratings和Seller組件。最后，如果在一個(gè)模塊化工程中使用它，必須要通過(guò) Vue.use() 明確地安裝路由功能。

import Vue from'vue' 
importRouter from'vue-router'

import Goods from ‘@/components/goods/goods'; 
import Ratings from ‘@/components/ratings/ratings'; 
import Seller from ‘@/components/seller/seller';

Vue.use(Router); // 需要import Vue和Router，不然會(huì)報(bào)錯(cuò)undefined 

通過(guò)const router= new VueRouter（）來(lái)定義一個(gè)路由，并傳入對(duì)應(yīng)的配置，包括路徑path和組件components。

最后，在使用newVue來(lái)創(chuàng)建和掛載vue根實(shí)例的時(shí)候，記得要通過(guò) router配置參數(shù)注入路由，即在router中export出來(lái)的路由對(duì)象，從而讓整個(gè)應(yīng)用都有路由功能。

vuex狀態(tài)管理

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。如前面所提到的，Vuex 已經(jīng)集成到 Vue 的官方調(diào)試工具vue Devtools，可以輕松的查看項(xiàng)目中的Vuex狀態(tài)變化情況。

假設(shè)有這樣一個(gè)場(chǎng)景：我們的項(xiàng)目規(guī)模比較大，有多個(gè)父組件，每個(gè)父組件同時(shí)又包含多個(gè)子組件。如何保持對(duì)所有時(shí)間的追蹤將變得很困難。到底哪個(gè)事件是哪個(gè)組件派發(fā)的，哪個(gè)組件該監(jiān)聽(tīng)哪個(gè)事件？父組件將變得和子組件耦合越來(lái)越嚴(yán)重，因?yàn)樗枰鞔_的派發(fā)和監(jiān)聽(tīng)子組件的某些事件。項(xiàng)目邏輯分散在各個(gè)組件當(dāng)中，很容易導(dǎo)致邏輯的混亂，不利于我們項(xiàng)目的維護(hù)。

這就是 Vuex 用來(lái)解決的問(wèn)題。 Vuex 的四個(gè)核心概念分別是：

The state tree：Vuex 使用單一狀態(tài)樹(shù)，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。至此它便作為一個(gè)『唯一數(shù)據(jù)源(SSOT)』而存在。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單狀態(tài)樹(shù)讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過(guò)程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

Getters：用來(lái)從 store 獲取 Vue 組件數(shù)據(jù)。

Mutators：事件處理器用來(lái)驅(qū)動(dòng)狀態(tài)的變化。

Actions：可以給組件使用的函數(shù)，以此用來(lái)驅(qū)動(dòng)事件處理器 mutations

Vuex和簡(jiǎn)單的全局對(duì)象是不同的，當(dāng)Vuex從store中讀取狀態(tài)值的時(shí)候，若狀態(tài)發(fā)生了變化，那么相應(yīng)的組件也會(huì)高效的更新。并且，改變store中狀態(tài)的唯一途徑就是提交commit mutations。這樣便于我們跟蹤每一次狀態(tài)的變化。只要發(fā)生了狀態(tài)的變化，一定伴隨著mutation的提交。

讓我們來(lái)看一個(gè)最簡(jiǎn)單的vuex例子：

安裝 Vuex 之后，讓我們來(lái)創(chuàng)建一個(gè) store。創(chuàng)建過(guò)程直截了當(dāng)——僅需要提供一個(gè)初始 state 對(duì)象和一些 mutations：

現(xiàn)在，你可以通過(guò) store.state 來(lái)獲取狀態(tài)對(duì)象，以及通過(guò) store.commit 方法觸發(fā)狀態(tài)變更：

vue-resource介紹

Vue-resource有體積小，支持IE9以上的瀏覽器，支持promise特性的特點(diǎn)。同樣推薦使用npm來(lái)安裝Vue-resource。

$ npm install vue-resource 

在安裝并引入vue-resource后，可以基于全局的Vue對(duì)象使用http，也可以基于某個(gè)Vue實(shí)例使用http。

在發(fā)送請(qǐng)求后，使用then方法來(lái)處理響應(yīng)結(jié)果，then方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是響應(yīng)成功時(shí)的回調(diào)函數(shù)，第二個(gè)參數(shù)是響應(yīng)失敗時(shí)的回調(diào)函數(shù)。

vue-resource的請(qǐng)求API是按照REST風(fēng)格設(shè)計(jì)的，它提供了7種請(qǐng)求API：

1. get(url,[options])
2. head(url,[options])
3. delete(url,[options])
4. jsonp(url,[options]) 
5. post(url,[body], [options])
6. put(url, [body],[options]) 
7. patch(url,[body], [options])

vue工程目錄結(jié)構(gòu)

下圖是一個(gè)簡(jiǎn)單的vue項(xiàng)目的大概結(jié)構(gòu)，下面簡(jiǎn)要介紹一下每個(gè)文件夾中一般都會(huì)存放哪些內(nèi)容。

components/文件夾用來(lái)存放Vue 組件。個(gè)人建議，把每一個(gè)組件中使用到的image圖片放置到對(duì)應(yīng)的組件子文件目錄下，便于統(tǒng)一的管理

Node_modules/npm安裝的該項(xiàng)目的依賴庫(kù)

vuex/文件夾存放的是和 Vuex store 相關(guān)的東西（state對(duì)象，actions，mutations)

router/文件夾存放的是跟vue-router相關(guān)的路由配置項(xiàng)

build/文件是 webpack 的打包編譯配置文件

static/文件夾存放一些靜態(tài)的、較少變動(dòng)的image或者css文件

config/文件夾存放的是一些配置項(xiàng)，比如服務(wù)器訪問(wèn)的端口配置等

dist/該文件夾一開(kāi)始是不存在，在我們的項(xiàng)目經(jīng)過(guò) build 之后才會(huì)產(chǎn)出

App.vue根組件，所有的子組件都將在這里被引用

index.html整個(gè)項(xiàng)目的入口文件，將會(huì)引用我們的根組件 App.vue

main.js入口文件的 js 邏輯，在webpack 打包之后將被注入到 index.html 中

vue中l(wèi)ess的應(yīng)用

在vue項(xiàng)目中一樣可以使用less預(yù)編譯，只是需要使用npm安裝less-loader插件。安裝完成后，在vue中的css模塊進(jìn)行簡(jiǎn)單的配置，這樣就可以直接使用less來(lái)編寫(xiě)樣式表了。在打包編譯的時(shí)候，會(huì)自動(dòng)生成對(duì)應(yīng)的css樣式。

vue合實(shí)例講解Vue核心功能

Vue的功能有很多，很難一一進(jìn)行詳細(xì)的解釋。下面根據(jù)在工作中的項(xiàng)目實(shí)例，結(jié)合代碼解釋一下vue的幾大核心功能。

計(jì)算屬性

假設(shè)有如下的購(gòu)物車(chē)結(jié)算場(chǎng)景，用戶選中商品的總金額是根據(jù)商品數(shù)量、選中商品種類數(shù) 和商品單價(jià)來(lái)變化的。然而，數(shù)量、選中種類數(shù)量和單價(jià)這幾個(gè)對(duì)象都是根據(jù)用戶選擇而動(dòng)態(tài)變化的，如果在前端模版中為了計(jì)算最終商品總額，放入這幾個(gè)動(dòng)態(tài)變化的變量（商品數(shù)量、商品單價(jià)、選中商品種類），會(huì)讓這個(gè)邏輯變得復(fù)雜難以維護(hù)。在這種情況下，模版便不再簡(jiǎn)潔清晰。Vue給出了此種場(chǎng)景的解決方案，在任何復(fù)雜的邏輯，vue都推薦使用計(jì)算屬性。

如上圖所示，在html中，我們只需要使用{{totalPrice}}這個(gè)計(jì)算屬性就可以來(lái)表示最終的商品總額。我們不需要關(guān)注這個(gè)變量的數(shù)值變化，totalPrice這個(gè)變量的邏輯寫(xiě)在對(duì)應(yīng)的computed計(jì)算屬性中。

也許會(huì)有疑問(wèn)，這個(gè)計(jì)算屬性和定義一個(gè)method方法不是差不多么？這兩者最大的區(qū)別是計(jì)算屬性是基于它的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生變化時(shí)才會(huì)重新計(jì)算求值。在本例中，只有當(dāng)選擇商品的價(jià)格price和數(shù)量count發(fā)生變化時(shí)，這個(gè)計(jì)算屬性totalPrice才會(huì)重新計(jì)算新的值。這就意味著，只要totalPrice這個(gè)值沒(méi)有發(fā)生變化，多次訪問(wèn)該計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行計(jì)算。

模版語(yǔ)法

Vue.js 使用了基于 HTML 的模版語(yǔ)法，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。Vue的模版語(yǔ)法包括了使用雙大括號(hào)插入文本、使用v-html插入純HTML內(nèi)容、使用v-bind插入對(duì)象、類似angular的v-if、v-show、v-for指令、以及過(guò)濾器等等。

組件化

組件（Component）是 Vue.js 最強(qiáng)大的功能。組件可以封裝可重用的代碼，通過(guò)傳入對(duì)象的不同，實(shí)現(xiàn)組件的復(fù)用。
舉一個(gè)簡(jiǎn)單的組建例子，我們首先編寫(xiě)一個(gè)star組件，它就是一個(gè)普通的star.vue文件。它的作用就是簡(jiǎn)單實(shí)現(xiàn)了一個(gè)五角星。

如何在其他的vue文件中使用這個(gè)star組件呢？如下圖所示，首先通過(guò)import引入star組件對(duì)象，并在想使用star組件的vue文件中聲明注冊(cè)star組件?，F(xiàn)在就可以愉快的通過(guò)標(biāo)簽來(lái)在該vue文件中任意地方使用star組件了。在你想展示一個(gè)五角星的地方，使用一個(gè)star標(biāo)簽，就可以輕松完成這個(gè)功能。

組件實(shí)例的作用域是孤立的。這意味著不能在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過(guò)子組件的props選項(xiàng)。如本例所示，子組件star要顯式的使用props選項(xiàng)聲明它期待獲得的數(shù)據(jù)。在這里就是指的“size”和“score”兩個(gè)變量。我們可以通過(guò)父級(jí)給子組件star傳入大小和數(shù)值這兩個(gè)對(duì)象，來(lái)實(shí)現(xiàn)對(duì)子組件的定制化。

過(guò)渡效果

Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果，可以用簡(jiǎn)單的幾行代碼實(shí)現(xiàn)酷炫的過(guò)渡效果。Vue 提供了 transition 的封裝組件，在使用v-if、v-show等方法使得transition內(nèi)部dom元素發(fā)生變化時(shí)，可以給任何元素和組件添加 entering/leaving 過(guò)渡。

當(dāng)v-show中內(nèi)容發(fā)生變化時(shí)，transition組件中的元素會(huì)發(fā)生狀態(tài)的改變，在應(yīng)用了transition封裝后，Vue會(huì)自動(dòng)識(shí)別目標(biāo)元素是否應(yīng)用了CSS過(guò)渡效果動(dòng)畫(huà)，如果有，會(huì)在合適的時(shí)機(jī)添加 entering/leaving的class來(lái)實(shí)現(xiàn)該過(guò)渡效果。

下圖所示是一個(gè)簡(jiǎn)單的過(guò)渡效果的例子，需要將想實(shí)現(xiàn)過(guò)渡效果的元素放在transition標(biāo)簽中包裹，通過(guò)name=“slide-fade”來(lái)聲明過(guò)渡效果名稱，并在對(duì)應(yīng)的vue文件中添加過(guò)渡效果的css樣式，這樣就可以簡(jiǎn)單的完成該元素的過(guò)渡效果。

總結(jié)

根據(jù)不完全統(tǒng)計(jì)，包括餓了么、稀土掘金、蘇寧易購(gòu)、美團(tuán)、天貓、荔枝FM、房多多、Laravel、htmlBurger等國(guó)內(nèi)外知名大公司都在使用vue進(jìn)行新項(xiàng)目的開(kāi)發(fā)和舊項(xiàng)目的前端重構(gòu)工作。

此外，vue + vuex+ vue-resource + vue-router + webpack + es6 + less的項(xiàng)目架構(gòu)成為了越來(lái)越多大公司的第一選擇。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論