Vue.js通過(guò)簡(jiǎn)潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，目前在GitHub上已經(jīng)有5000+的star。本文將從各方面對(duì)Vue.js做一個(gè)深入的介紹。

Vue.js 是我在2014年2月開(kāi)源的一個(gè)前端開(kāi)發(fā)庫(kù)，通過(guò)簡(jiǎn)潔的 API 提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，目前在 GitHub上已經(jīng)有5000+的star。本文將從各方面對(duì)Vue.js做一個(gè)深入的介紹。

開(kāi)發(fā)初衷

2013年末，我還在Google Creative Lab工作。當(dāng)時(shí)在項(xiàng)目中使用了一段時(shí)間的Angular，在感嘆數(shù)據(jù)綁定帶來(lái)生產(chǎn)力提升的同時(shí)，我也感到Angular的API設(shè)計(jì)過(guò)于繁瑣，使得學(xué)習(xí)曲線頗為陡峭。出于對(duì)Angular數(shù)據(jù)綁定原理的好奇，我開(kāi)始 “造輪子”，自己實(shí)現(xiàn)了一個(gè)非常粗糙的、基于依賴收集的數(shù)據(jù)綁定庫(kù)。這就是Vue.js的前身。同時(shí)在實(shí)際開(kāi)發(fā)中，我發(fā)現(xiàn)用戶界面完全可以用嵌套的組件樹(shù)來(lái)描述，而一個(gè)組件恰恰可以對(duì)應(yīng)MVVM中的ViewModel。于是我決定將我的數(shù)據(jù)綁定實(shí)驗(yàn)改進(jìn)成一個(gè)真正的開(kāi)源項(xiàng)目，其核心思想便是 “數(shù)據(jù)驅(qū)動(dòng)的組件系統(tǒng)”。

MVVM 數(shù)據(jù)綁定

MVVM的本質(zhì)是通過(guò)數(shù)據(jù)綁定鏈接View和Model，讓數(shù)據(jù)的變化自動(dòng)映射為視圖的更新。Vue.js在數(shù)據(jù)綁定的API設(shè)計(jì)上借鑒了Angular的指令機(jī)制：用戶可以通過(guò)具有特殊前綴的HTML 屬性來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定，也可以使用常見(jiàn)的花括號(hào)模板插值，或是在表單元素上使用雙向綁定：

<!-- 指令 -->
<span v-text="msg"></span>
<!-- 插值 -->
<span>{{msg}}</span>
<!-- 雙向綁定 -->
<input v-model="msg"> 

插值本質(zhì)上也是指令，只是為了方便模板的書(shū)寫(xiě)。在模板的編譯過(guò)程中，Vue.js會(huì)為每一處需要?jiǎng)討B(tài)更新的DOM節(jié)點(diǎn)創(chuàng)建一個(gè)指令對(duì)象。每當(dāng)一個(gè)指令對(duì)象觀測(cè)的數(shù)據(jù)變化時(shí)，它便會(huì)對(duì)所綁定的目標(biāo)節(jié)點(diǎn)執(zhí)行相應(yīng)的DOM操作?；谥噶畹臄?shù)據(jù)綁定使得具體的DOM操作都被合理地封裝在指令定義中，業(yè)務(wù)代碼只需要涉及模板和對(duì)數(shù)據(jù)狀態(tài)的操作即可，這使得應(yīng)用的開(kāi)發(fā)效率和可維護(hù)性都大大提升。

與Angular不同的是，Vue.js的API里并沒(méi)有繁雜的module、controller、scope、factory、service等概念，一切都是以“ViewModel 實(shí)例”為基本單位：

<!-- 模板 -->
<div id="app">
 {{msg}}
</div>
// 原生對(duì)象即數(shù)據(jù)
var data = {
 msg: 'hello!'
}
// 創(chuàng)建一個(gè) ViewModel 實(shí)例
var vm = new Vue({
 // 選擇目標(biāo)元素
 el: '#app',
 // 提供初始數(shù)據(jù)
 data: data
})

渲染結(jié)果：

<div id="app">
 hello!
</div> 

在渲染的同時(shí)，Vue.js也已經(jīng)完成了數(shù)據(jù)的動(dòng)態(tài)綁定：此時(shí)如果改動(dòng)data.msg的值，DOM將自動(dòng)更新。是不是非常簡(jiǎn)單易懂呢？除此之外，Vue.js對(duì)自定義指令、過(guò)濾器的API也做了大幅的簡(jiǎn)化，如果你有Angular的開(kāi)發(fā)經(jīng)驗(yàn)，上手會(huì)非常迅速。

數(shù)據(jù)觀測(cè)的實(shí)現(xiàn)

Vue.js的數(shù)據(jù)觀測(cè)實(shí)現(xiàn)原理和Angular有著本質(zhì)的不同。了解Angular的讀者可能知道，Angular的數(shù)據(jù)觀測(cè)采用的是臟檢查（dirty checking）機(jī)制。每一個(gè)指令都會(huì)有一個(gè)對(duì)應(yīng)的用來(lái)觀測(cè)數(shù)據(jù)的對(duì)象，叫做watcher；一個(gè)作用域中會(huì)有很多個(gè)watcher。每當(dāng)界面需要更新時(shí)，Angular會(huì)遍歷當(dāng)前作用域里的所有watcher，對(duì)它們一一求值，然后和之前保存的舊值進(jìn)行比較。如果求值的結(jié)果變化了，就觸發(fā)對(duì)應(yīng)的更新，這個(gè)過(guò)程叫做digest cycle。臟檢查有兩個(gè)問(wèn)題：
1.任何數(shù)據(jù)變動(dòng)都意味著當(dāng)前作用域的每一個(gè)watcher需要被重新求值，因此當(dāng)watcher的數(shù)量龐大時(shí)，應(yīng)用的性能就不可避免地受到影響，并且很難優(yōu)化。
2.當(dāng)數(shù)據(jù)變動(dòng)時(shí)，框架并不能主動(dòng)偵測(cè)到變化的發(fā)生，需要手動(dòng)觸發(fā)digest cycle才能觸發(fā)相應(yīng)的DOM 更新。Angular通過(guò)在DOM事件處理函數(shù)中自動(dòng)觸發(fā)digest cycle部分規(guī)避了這個(gè)問(wèn)題，但還是有很多情況需要用戶手動(dòng)進(jìn)行觸發(fā)。

Vue.js采用的則是基于依賴收集的觀測(cè)機(jī)制。從原理上來(lái)說(shuō)，和老牌MVVM框架Knockout是一樣的。依賴收集的基本原理是：
1.將原生的數(shù)據(jù)改造成 “可觀察對(duì)象”。一個(gè)可觀察對(duì)象可以被取值，也可以被賦值。
2.在watcher的求值過(guò)程中，每一個(gè)被取值的可觀察對(duì)象都會(huì)將當(dāng)前的watcher注冊(cè)為自己的一個(gè)訂閱者，并成為當(dāng)前watcher的一個(gè)依賴。
3.當(dāng)一個(gè)被依賴的可觀察對(duì)象被賦值時(shí)，它會(huì)通知所有訂閱自己的watcher重新求值，并觸發(fā)相應(yīng)的更新。
4.依賴收集的優(yōu)點(diǎn)在于可以精確、主動(dòng)地追蹤數(shù)據(jù)的變化，不存在上述提到的臟檢查的兩個(gè)問(wèn)題。但傳統(tǒng)的依賴收集實(shí)現(xiàn)，比如Knockout，通常需要包裹原生數(shù)據(jù)來(lái)制造可觀察對(duì)象，在取值和賦值時(shí)需要采用函數(shù)調(diào)用的形式，在進(jìn)行數(shù)據(jù)操作時(shí)寫(xiě)法繁瑣，不夠直觀；同時(shí)，對(duì)復(fù)雜嵌套結(jié)構(gòu)的對(duì)象支持也不理想。

Vue.js利用了ES5的Object.defineProperty方法，直接將原生數(shù)據(jù)對(duì)象的屬性改造為getter和setter，在這兩個(gè)函數(shù)內(nèi)部實(shí)現(xiàn)依賴的收集和觸發(fā)，而且完美支持嵌套的對(duì)象結(jié)構(gòu)。對(duì)于數(shù)組，則通過(guò)包裹數(shù)組的可變方法（比如push）來(lái)監(jiān)聽(tīng)數(shù)組的變化。這使得操作Vue.js的數(shù)據(jù)和操作原生對(duì)象幾乎沒(méi)有差別[注:在添加/刪除屬性，或是修改數(shù)組特定位置元素時(shí)，需要調(diào)用特定的函數(shù)，如obj.$add(key, value)才能觸發(fā)更新。這是受ES5的語(yǔ)言特性所限。]，數(shù)據(jù)操作的邏輯更為清晰流暢，和第三方數(shù)據(jù)同步方案的整合也更為方便。

組件系統(tǒng)

在大型的應(yīng)用中，為了分工、復(fù)用和可維護(hù)性，我們不可避免地需要將應(yīng)用抽象為多個(gè)相對(duì)獨(dú)立的模塊。在較為傳統(tǒng)的開(kāi)發(fā)模式中，我們只有在考慮復(fù)用時(shí)才會(huì)將某一部分做成組件；但實(shí)際上，應(yīng)用類 UI 完全可以看作是全部由組件樹(shù)構(gòu)成的：

因此，在Vue.js的設(shè)計(jì)中將組件作為一個(gè)核心概念?？梢哉f(shuō)，每一個(gè)Vue.js應(yīng)用都是圍繞著組件來(lái)開(kāi)發(fā)的。

注冊(cè)一個(gè)Vue.js組件十分簡(jiǎn)單：

Vue.component('my-component', {
 // 模板
 template: '<div>{{msg}} {{privateMsg}}</div>',
 // 接受參數(shù)
 props: {
  msg: String<br> 

 },
 // 私有數(shù)據(jù)，需要在函數(shù)中返回以避免多個(gè)實(shí)例共享一個(gè)對(duì)象
 data: function () {
  return {
   privateMsg: 'component!'
  }
 }
})

注冊(cè)之后即可在父組件模板中以自定義元素的形式調(diào)用一個(gè)子組件：

<my-component msg="hello"></my-component>

渲染結(jié)果：

<div>hello component!</div>

Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。一個(gè)組件可以預(yù)定義很多選項(xiàng)，但最核心的是以下幾個(gè)：

•模板（template）：模板聲明了數(shù)據(jù)和最終展現(xiàn)給用戶的DOM之間的映射關(guān)系。
•初始數(shù)據(jù)（data）：一個(gè)組件的初始數(shù)據(jù)狀態(tài)。對(duì)于可復(fù)用的組件來(lái)說(shuō)，這通常是私有的狀態(tài)。
•接受的外部參數(shù)(props)：組件之間通過(guò)參數(shù)來(lái)進(jìn)行數(shù)據(jù)的傳遞和共享。參數(shù)默認(rèn)是單向綁定（由上至下），但也可以顯式地聲明為雙向綁定。
•方法（methods）：對(duì)數(shù)據(jù)的改動(dòng)操作一般都在組件的方法內(nèi)進(jìn)行。可以通過(guò)v-on指令將用戶輸入事件和組件方法進(jìn)行綁定。
•生命周期鉤子函數(shù)（lifecycle hooks）：一個(gè)組件會(huì)觸發(fā)多個(gè)生命周期鉤子函數(shù)，比如created，attached，destroyed等等。在這些鉤子函數(shù)中，我們可以封裝一些自定義的邏輯。和傳統(tǒng)的MVC相比，可以理解為 Controller的邏輯被分散到了這些鉤子函數(shù)中。
•私有資源（assets）：Vue.js當(dāng)中將用戶自定義的指令、過(guò)濾器、組件等統(tǒng)稱為資源。由于全局注冊(cè)資源容易導(dǎo)致命名沖突，一個(gè)組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調(diào)用。

除此之外，同一顆組件樹(shù)之內(nèi)的組件之間還可以通過(guò)內(nèi)建的事件API來(lái)進(jìn)行通信。Vue.js提供了完善的定義、復(fù)用和嵌套組件的API，讓開(kāi)發(fā)者可以像搭積木一樣用組件拼出整個(gè)應(yīng)用的界面。這個(gè)思路的可行性在Facebook開(kāi)源的React當(dāng)中也得到了印證。

基于構(gòu)建工具的單文件組件格式

Vue.js的核心庫(kù)只提供基本的API，本身在如何組織應(yīng)用的文件結(jié)構(gòu)上并不做太多約束。但在構(gòu)建大型應(yīng)用時(shí)，推薦使用Webpack+vue-loader這個(gè)組合以使針對(duì)組件的開(kāi)發(fā)更高效。

Webpack是由Tobias Koppers開(kāi)發(fā)的一個(gè)開(kāi)源前端模塊構(gòu)建工具。它的基本功能是將以模塊格式書(shū)寫(xiě)的多個(gè)JavaScript文件打包成一個(gè)文件，同時(shí)支持CommonJS和AMD格式。但讓它與眾不同的是，它提供了強(qiáng)大的loader API來(lái)定義對(duì)不同文件格式的預(yù)處理邏輯，從而讓我們可以將CSS、模板，甚至是自定義的文件格式當(dāng)做JavaScript模塊來(lái)使用。Webpack 基于loader還可以實(shí)現(xiàn)大量高級(jí)功能，比如自動(dòng)分塊打包并按需加載、對(duì)圖片資源引用的自動(dòng)定位、根據(jù)圖片大小決定是否用base64內(nèi)聯(lián)、開(kāi)發(fā)時(shí)的模塊熱替換等等，可以說(shuō)是目前前端構(gòu)建領(lǐng)域最有競(jìng)爭(zhēng)力的解決方案之一。

我在Webpack的loader API基礎(chǔ)上開(kāi)發(fā)了vue-loader插件，從而讓我們可以用這樣的單文件格式 (*.vue) 來(lái)書(shū)寫(xiě)Vue組件：

<style>
.my-component h2 {
 color: red;
}
</style>
<template>
 <div class="my-component">
 <h2>Hello from {{msg}}</h2>
 <other-component></other-component>
 </div>
</template>
<script>
// 遵循 CommonJS 模塊格式
var otherComponent = require('./other-component')
// 導(dǎo)出組件定義
module.exports = {
 data: function () {
 return {
  msg: 'vue-loader'
 }
 },
 components: {
 'other-component': otherComponent
 }
}
</script>

 同時(shí)，還可以在*.vue文件中使用其他預(yù)處理器，只需要安裝對(duì)應(yīng)的Webpack loader即可：

<style lang="stylus">
.my-component h2
 color red
</style>
<template lang="jade">
div.my-component
 h2 Hello from {{msg}}
</template>
<script lang="babel">
// 利用 Babel 編譯 ES2015
export default {
 data () {
 return {
  msg: 'Hello from Babel!'
 }
 }
}
</script>

這樣的組件格式，把一個(gè)組件的模板、樣式、邏輯三要素整合在同一個(gè)文件中，即方便開(kāi)發(fā)，也方便復(fù)用和維護(hù)。另外，Vue.js本身支持對(duì)組件的異步加載，配合Webpack的分塊打包功能，可以極其輕松地實(shí)現(xiàn)組件的異步按需加載。

其他特性

Vue.js還有幾個(gè)值得一提的特性：

1.異步批量DOM更新：當(dāng)大量數(shù)據(jù)變動(dòng)時(shí)，所有受到影響的watcher會(huì)被推送到一個(gè)隊(duì)列中，并且每個(gè)watcher只會(huì)推進(jìn)隊(duì)列一次。這個(gè)隊(duì)列會(huì)在進(jìn)程的下一個(gè) “tick” 異步執(zhí)行。這個(gè)機(jī)制可以避免同一個(gè)數(shù)據(jù)多次變動(dòng)產(chǎn)生的多余DOM操作，也可以保證所有的DOM寫(xiě)操作在一起執(zhí)行，避免DOM讀寫(xiě)切換可能導(dǎo)致的layout。
2.動(dòng)畫(huà)系統(tǒng)：Vue.js提供了簡(jiǎn)單卻強(qiáng)大的動(dòng)畫(huà)系統(tǒng)，當(dāng)一個(gè)元素的可見(jiàn)性變化時(shí)，用戶不僅可以很簡(jiǎn)單地定義對(duì)應(yīng)的CSS Transition或Animation效果，還可以利用豐富的JavaScript鉤子函數(shù)進(jìn)行更底層的動(dòng)畫(huà)處理。
3.可擴(kuò)展性：除了自定義指令、過(guò)濾器和組件，Vue.js還提供了靈活的mixin機(jī)制，讓用戶可以在多個(gè)組件中復(fù)用共同的特性。

與Web Components的異同

對(duì)Web Components有了解的讀者看到這里可能會(huì)產(chǎn)生疑問(wèn)：Vue.js的組件和Web Components的區(qū)別在哪里呢？這里簡(jiǎn)要地做一下分析。

Web Components是一套底層規(guī)范，本身并不帶有數(shù)據(jù)綁定、動(dòng)畫(huà)系統(tǒng)等上層功能，因此更合適的比較對(duì)象可能是Polymer。Polymer在API和功能上和Vue.js比較相似，但它對(duì)Web Components的硬性依賴使得它在瀏覽器支持方面有一定的問(wèn)題——在不支持Web Components規(guī)范的瀏覽器中，需要加載龐大的polyfill，不僅在性能上會(huì)有影響，并且有些功能，比如ShadowDOM，polyfill并沒(méi)有辦法完美支持。同時(shí)，Web Components規(guī)范本身尚未定稿，一些具體設(shè)計(jì)上仍存在不小的分歧。相比之下，Vue.js在支持的瀏覽器中（IE9+）沒(méi)有任何依賴。

除此之外，在支持Web Components的環(huán)境中，我們也可以很簡(jiǎn)單地利用Web Components底層API將一個(gè)Vue.js組件封裝在一個(gè)真正的自定義元素中，從而實(shí)現(xiàn)Vue.js組件和其他框架的無(wú)縫整合。

總結(jié)

在發(fā)布之初，Vue.js原本是著眼于輕量的嵌入式使用場(chǎng)景。在今天，Vue.js也依然適用于這樣的場(chǎng)景。由于其輕量（22kb min+gzip）、高性能的特點(diǎn)，對(duì)于移動(dòng)場(chǎng)景也有很好的契合度。更重要的是，設(shè)計(jì)完備的組件系統(tǒng)和配套的構(gòu)建工具、插件，使得Vue.js在保留了其簡(jiǎn)潔API的同時(shí)，也已經(jīng)完全有能力擔(dān)當(dāng)起復(fù)雜的大型應(yīng)用的開(kāi)發(fā)。

從誕生起到現(xiàn)在的一年半歷程中，Vue.js經(jīng)歷了一次徹底的重構(gòu)，多次API的設(shè)計(jì)改進(jìn)，目前已經(jīng)趨于穩(wěn)定，測(cè)試覆蓋率長(zhǎng)期保持在100%，GitHub Bug數(shù)量長(zhǎng)期保持在個(gè)位數(shù)，并在世界各地都已經(jīng)有公司/項(xiàng)目將Vue.js應(yīng)用到生產(chǎn)環(huán)境中。在2015年晚些時(shí)候，Vue.js將發(fā)布1.0版本，敬請(qǐng)期待。

【參考鏈接】

Vue.js官方網(wǎng)站：http://vuejs.org

Vue.js GitHub倉(cāng)庫(kù)：https://github.com/yyx990803/vue

Webpack官方網(wǎng)站: http://webpack.github.io

vue-loader單頁(yè)組件示例：https://github.com/vuejs/vue-loader-example

總結(jié)

以上所述是小編給大家介紹的Vue.js輕量高效的前端組件化方案，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論