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 中了。