Vue.js 的組件化編程

本文整理自稀土創始人陰明在 Coding 線下分享會北京站關於 Vue.js 內容所做的分享。

很高興今天有機會來跟大家聊一聊 Vue.js。分享前我想告訴大家的是，Vue.js 是一個前端框架，這個很重要。

為什麼我沒有選擇 React？React 相對於整個開發業務來講是比較「重」的，而且實現的方式其實挺超前的。

我雖然並不討厭 React，但是由於 Vue 更加簡單和輕便，可能對於一些相對簡單的團隊來講，是一個更好的選擇。

本次分享中，我會先介紹一下 Vue.js 的歷史，然後重點講講掘金在開發中總結的一些組件化編程經驗，最後說一說我們是怎麼使用 Vue.js 的。

介紹一下我自己：

首先介紹一下 Vue js，它是一個很「高大上」的前端庫。

用庫的目的是為了能在最少的時間裡寫出最多的代碼，能夠在產品經理找你麻煩之前就把整個項目搞定。我認為這是一個好的庫所具有的意義。

MVVM 這類前端框架，它本身就是一個設計模式。這是一種可以用同一種方法解決一些普遍問題的思路，是一個抽象的概念。而 ViewModel 這個東西在這中間，相當於一個黑箱子。

如果我們不使用 MVVM 會怎麼樣呢？

舉個例子：當網站數據改變的時候，我們要手動做一下操作，把某一部分展示的 UI 重新渲染一遍，這會是一個很麻煩的過程。但是如果我們使用 MVVM 框架，當數據發生變化之後，UI 改變的這個部分就會由這個框架來幫我們搞定，這相當於它造了一個「輪子」，我們在上面跑就可以了，這就是 MVVM。

什麼是前端框架？在我看來具有一個很重要的「點」才能叫前端框架，一個小的「輪子」或者小的工具不能叫框架層，只能叫工具層。

首先它要有一些約定的代碼方式來編寫；

其次是寫起來要很容易。像業務邏輯這類代碼如果「裸」寫的話，從抓取、數據改變等等方面往往需要寫個兩三百行代碼才能完成一個小事；如果有這個框架，寫五行就能搞定。

第三，代碼需要容易維護。因為使用一個框架，代碼會有一些規範和結構，通過這些規範和結構可以讓我們很方便地維護代碼的 Code Base。

還有就是作為一個有價值的框架，隨著網站業務邏輯不斷地複雜化，這個框架必須依舊可以存在。

比如說，當業務邏輯相當複雜的時候，複雜到幾百個頁面組件的時候，很多框架在這個時候很快就不行了。但是使用好的框架，讓我有最佳實踐能夠解決這個問題。它其實就是通過一些規範讓你在更複雜的業務邏輯里依舊不會丟失掉、迷失掉。

這也是我們使用框架的一個準則，因為掘金的網站很複雜，我們的前端業務也隨之變得越來越複雜，這就使得在前端庫方面，性能也成為了我們在意的點之一。

以上，是我認為一個好的前端框架應該擁有的一些特點。

接下來我會給大家展示一個簡潔的代碼塊介紹一下 Vue.js。

可以看到，代碼塊左邊是 UI 層，右邊定義了 State。通過簡單輸入的兩個單詞大家應該一下就懂了。

這段比較簡短的代碼可以讓我們做到一些事情，也能看到信息輸出。其實，我們會多問一句，它到底是怎麼實現的呢？

很多人在使用框架的時候並不太在意這一點，但我還是蠻在意的。

這段代碼塊實現的原理，就是利用了一個 ES5 出現的特別重要的屬性，不過，它並不支持 IE8 以下版本的 IE 瀏覽器：

假設 A 是一個 Object，當我們在它下面定義一個值的時候我們可以定義很多東西。最重要的就是圖中這兩個函數。

每當我們去取 A.B 這個值的時候，這個函數會被調用，而且會通過這個函數調用一個值。這個函數會在 Set 值賦值的時候被調用一下，這樣使得函數在調用值的時候都會有所處理。

通過以上這些內容，我想說的是 Vue.js 其實並不複雜，它就是通過調用一個很原始的函數來做到的，但是又有很多代碼層面的優化，這是它非常棒的地方。

另外，我們每次提到框架，我一定會提一下這個框架的活躍度，為什麼？因為框架的活躍度就代表了這個框架的完整度。

什麼叫一個完整的框架，除了我剛才講的一個框架應該具有的好的特點以外，它還應該有一個活躍社區來解決用戶的問題；同樣，它應該有自己測試的地方，有不斷更新代碼邊緣庫的地方。

Vue.js 在我心中還有一個非常非常好的點，也是我特別特別在意的點，就是 Vue.js 挺「性感」的。

Angular 剛出來的時候也是一個讓很多人感覺很性感的框架，但一年多之後突然就變得「Low」了。

相反， Vue 直到現在依然給人很性感的印象，我想，很大一個原因是它使用了各種「輪子」。

Vue 對於我來講，它沒有隨時間推移而性能下降或者變得不性感的原因，也是因為使用 Vue 的這群人的貢獻使它融合了很多庫的各種特點，當然，一會兒我也會講一講它是怎麼跟別的輪子結合的。

當然，Vue 一直都能在第一時間得到更新，依然保持高效有用，這也是很重要的。

另外，Vue.js 的語法也很簡單。在我第一次去學 React 的時候，我覺得官網太不人性化了，Vue 的學習曲線相比於前者也顯得不是那麼陡峭。

我可以擲地有聲的講，Vue 比 Angular 快，比 React 輕，它同樣性感地結合著新的「輪子」。

同時，它的文檔官網也很好看：文檔做的好，用戶開始使用它的成本會大大下降。

最最重要的一點，也是我最在意的，就是我就是喜歡，我不管了。

接下來我們講一下 Vue 的組件化，我先講為什麼組件化，再講如何實現組件化，以及在 Vue 實踐里我們是怎麼做的。

為什麼要組件化呢？因為爽。因為任何一個人處理信息邏輯的能力都是有限的，所以當我們面對一個很複雜的邏輯的時候，是不太可能一次搞定一大堆東西的。

但是，我們能搞定一個小東西，以及各種各樣小東西之間的關係。出於這一點考慮，當我們面對無數的系統時，我們一定會把它層面化，之後再組件化。這是我們本能會做的反應，這裡我就不再贅述了。

那麼，如何實現組件化？

我們應該按照定義一個組件、載入一個組件、使用一個組件、控制一個組件的生命周期這樣的流程來分析這個問題。

這是一個 HTML，這裡面有一個我定義的小組件，它援引了一個 JS 的代碼。這段代碼的第一段就是通過找 ID list，去把這個 Vue 雙向綁定，綁定到相關的 HTML 里。

但是，我們知道裡面有一個組件，這個是怎麼出來的呢？我們可以用 Vue 定義一個。

我先說一個比較直白的，在這裡看到一個 template，就把這個放在裡面了。我們要把這個 template 放到這兒。

然後是註冊，這段代碼裝起來，就變成底下的，這個就是在找到 Exmple 之後把相應的組件和變數賦予它相應的 Dom 文件和樣式，這就是它完成一個最簡單組件化的流程。

剛才大家看到那樣的一個文件 (app.vue)，大家知道，那個文件直接傳給網站是不能展示的，它一定用了工具把那三塊抓出來並且合併成另外一個獨立的 HTML 或者是 style 讓網頁可以展示。用的就是 webpack，這是一個打包工具，這裡所有的模塊都是工具，沒有什麼特點的。

它幹了些什麼？

通過定義好的一些方式，當它測試一個文件的後綴時會用一個 vue loader 的庫，它可以根據相應的語法可以讀懂像 vue 這樣的文件，它知道怎麼把剛才那個文件的 style 部分抓取出來，而且可以用到 SaaS 之後處理。它看到 template 之後把這個文件抓取出來再組裝起來，或者可以根據你的需求變成多個文件，這就是它給你的無數的選擇。

它就是一個打包工具，其實大部分人學它的就是定義語法是什麼等等的。它就是學好定義文件就是一個很好用的打包工具。

這是一個網站，最重要的一塊邏輯就是我們寫的業務代碼。在這裡有幾個應用本身的 App.vue，這裡又有兩個組件，以及底下是 nodemodules 和 webpack 配置文件。

我們來看一下這個配置文件是什麼樣的。

首先它會讀文件，其次會輸出到這個文件夾下的文件里，它用的是 vue-loader，再往後看到最上面，就是生成一個 vue，引入官方庫，它就把這個組件傳給整個應用。

在 APP 里有自己一塊內容，並且還援引了那兩個組件。這是怎麼做的呢，這和上一頁的做法是一樣的。

最後，我講一下很重要的，就是數據之間的流通。主要的話是三個：

第一，Props。我剛才說的就是父組件可以給一些數據到子組件，但是需要一個一個去定義。

第二，繼承。這是在 1.0 之前用的，之後就廢掉了，就是可以把子組件所有的元素都弄進來，但是後來這個東西不用了。

第三個，Vuex。其實這個邏輯跟前面講的都很像，就是父組件可以把一個值給子組件，子組件可以把這個給父組件，父組件可以把這個給所有人，以及組件里可以相互間調用來調用去，其實這就是一個數據流的東西。

這時候我們會遇到一個問題：當整個網站是一個應用，它就要知道現在登錄的用戶是誰。

這樣的話每個地方都要定義，於是我們用一個管理器專門去管理，比如說用戶。應用級的變數我們就要通過業務來實現。這裡我們沒有講很細，沒有講 Store等等的，因為前面的劉輝已經講的很清楚了。

我就講一下 State 管理器，這使得在任何組件里想去觸碰應用級 State 時候都有相應的函數調用。這個東西出來的也不是特別久，而且概念比較新，現在我們已經應用到我們應用里了，所以這裡大家有時間可以一起討論一下，剛才講的這些已經使用到我們 APP 中了。

這是我給到大家的一些鏈接，如果大家想討論 vue 的話，都可以跟我們一起討論。我們總是在總結，要不要學一個新的「輪子」？

這是很痛苦的。

像五年前我是一個高手，我能夠把代碼倒背下來，可現在沒有用了，這樣的話是不是以前做的沒有意義了呢？

其實我的邏輯就是，在很多的框架，代碼，程序之間有些東西是互通的，我用 JS 的東西放在現在也是有用的，或者幫助我現在學的更快。我在這個過程中不斷學新的庫，不斷學「輪子」，使「輪子」，這個過程積累的東西在代碼當中都是有意義的。就是嘗試一下新的庫也是蠻帥的。

推薦閱讀：