Vue.js輕量高效前端組件化方案的示例分析

這篇文章給大家分享的是有關Vue.js輕量高效前端組件化方案的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

開發初衷

2013年末，我還在Google Creative Lab工作。當時在項目中使用了一段時間的Angular，在感嘆數據綁定帶來生產力提升的同時，我也感到Angular的API設計過于繁瑣，使得學習曲線頗為陡峭。出于對Angular數據綁定原理的好奇，我開始 “造輪子”，自己實現了一個非常粗糙的、基于依賴收集的數據綁定庫。這就是Vue.js的前身。同時在實際開發中，我發現用戶界面完全可以用嵌套的組件樹來描述，而一個組件恰恰可以對應MVVM中的ViewModel。于是我決定將我的數據綁定實驗改進成一個真正的開源項目，其核心思想便是 “數據驅動的組件系統”。

MVVM 數據綁定

MVVM的本質是通過數據綁定鏈接View和Model，讓數據的變化自動映射為視圖的更新。Vue.js在數據綁定的API設計上借鑒了Angular的指令機制：用戶可以通過具有特殊前綴的HTML 屬性來實現數據綁定，也可以使用常見的花括號模板插值，或是在表單元素上使用雙向綁定：

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

插值本質上也是指令，只是為了方便模板的書寫。在模板的編譯過程中，Vue.js會為每一處需要動態更新的DOM節點創建一個指令對象。每當一個指令對象觀測的數據變化時，它便會對所綁定的目標節點執行相應的DOM操作。基于指令的數據綁定使得具體的DOM操作都被合理地封裝在指令定義中，業務代碼只需要涉及模板和對數據狀態的操作即可，這使得應用的開發效率和可維護性都大大提升。

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

<!-- 模板 -->
<div id="app">
 {{msg}}
</div>
// 原生對象即數據
var data = {
 msg: 'hello!'
}
// 創建一個 ViewModel 實例
var vm = new Vue({
 // 選擇目標元素
 el: '#app',
 // 提供初始數據
 data: data
})

渲染結果：

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

在渲染的同時，Vue.js也已經完成了數據的動態綁定：此時如果改動data.msg的值，DOM將自動更新。是不是非常簡單易懂呢？除此之外，Vue.js對自定義指令、過濾器的API也做了大幅的簡化，如果你有Angular的開發經驗，上手會非常迅速。

數據觀測的實現

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

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

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

組件系統

在大型的應用中，為了分工、復用和可維護性，我們不可避免地需要將應用抽象為多個相對獨立的模塊。在較為傳統的開發模式中，我們只有在考慮復用時才會將某一部分做成組件；但實際上，應用類 UI 完全可以看作是全部由組件樹構成的：

因此，在Vue.js的設計中將組件作為一個核心概念。可以說，每一個Vue.js應用都是圍繞著組件來開發的。

注冊一個Vue.js組件十分簡單：

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

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

注冊之后即可在父組件模板中以自定義元素的形式調用一個子組件：

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

渲染結果：

<div>hello component!</div>

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

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

除此之外，同一顆組件樹之內的組件之間還可以通過內建的事件API來進行通信。Vue.js提供了完善的定義、復用和嵌套組件的API，讓開發者可以像搭積木一樣用組件拼出整個應用的界面。這個思路的可行性在Facebook開源的React當中也得到了印證。

基于構建工具的單文件組件格式

Vue.js的核心庫只提供基本的API，本身在如何組織應用的文件結構上并不做太多約束。但在構建大型應用時，推薦使用Webpack+vue-loader這個組合以使針對組件的開發更高效。

Webpack是由Tobias Koppers開發的一個開源前端模塊構建工具。它的基本功能是將以模塊格式書寫的多個JavaScript文件打包成一個文件，同時支持CommonJS和AMD格式。但讓它與眾不同的是，它提供了強大的loader API來定義對不同文件格式的預處理邏輯，從而讓我們可以將CSS、模板，甚至是自定義的文件格式當做JavaScript模塊來使用。Webpack 基于loader還可以實現大量高級功能，比如自動分塊打包并按需加載、對圖片資源引用的自動定位、根據圖片大小決定是否用base64內聯、開發時的模塊熱替換等等，可以說是目前前端構建領域最有競爭力的解決方案之一。

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

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

 同時，還可以在*.vue文件中使用其他預處理器，只需要安裝對應的Webpack loader即可：

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

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

其他特性

Vue.js還有幾個值得一提的特性：

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

與Web Components的異同

對Web Components有了解的讀者看到這里可能會產生疑問：Vue.js的組件和Web Components的區別在哪里呢？這里簡要地做一下分析。

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

除此之外，在支持Web Components的環境中，我們也可以很簡單地利用Web Components底層API將一個Vue.js組件封裝在一個真正的自定義元素中，從而實現Vue.js組件和其他框架的無縫整合。

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