{{msg}}

 {{msg}}

 hello!

在渲染的同時(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的開發(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í)寫法繁瑣，不夠直觀；同時(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)的開發(fā)模式中，我們只有在考慮復(fù)用時(shí)才會(huì)將某一部分做成組件；但實(shí)際上，應(yīng)用類 UI 完全可以看作是全部由組件樹構(gòu)成的：

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

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

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

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

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

渲染結(jié)果：

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)用。

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

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

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

Webpack是由Tobias Koppers開發(fā)的一個(gè)開源前端模塊構(gòu)建工具。它的基本功能是將以模塊格式書寫的多個(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)、開發(fā)時(shí)的模塊熱替換等等，可以說(shuō)是目前前端構(gòu)建領(lǐng)域最有競(jìng)爭(zhēng)力的解決方案之一。

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

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

.my-component h3
 color red


div.my-component
 h3 Hello from {{msg}}


// 利用 Babel 編譯 ES2015
export default {
 data () {
 return {
  msg: 'Hello from Babel!'
 }
 }
}

這樣的組件格式，把一個(gè)組件的模板、樣式、邏輯三要素整合在同一個(gè)文件中，即方便開發(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寫操作在一起執(zhí)行，避免DOM讀寫切換可能導(dǎo)致的layout。
2.動(dòng)畫系統(tǒng)：Vue.js提供了簡(jiǎn)單卻強(qiáng)大的動(dòng)畫系統(tǒng)，當(dāng)一個(gè)元素的可見(jiàn)性變化時(shí)，用戶不僅可以很簡(jiǎn)單地定義對(duì)應(yīng)的CSS Transition或Animation效果，還可以利用豐富的JavaScript鉤子函數(shù)進(jìn)行更底層的動(dòng)畫處理。
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)畫系統(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ú)縫整合。

感謝各位的閱讀！關(guān)于“Vue.js輕量高效前端組件化方案的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。