Vue.js 介紹
平易近人的框架
前言
你可能聽過 Vue.js ，目前這個套件已經有超過 137,000個關注了，在我的看法是，表示這個生態系已經逐漸穩定，所以決定花點時間開始學習 Vue.js 並且應用在我後面打算做的 side project。
這篇文章會簡單整理我目前對於 Vue 的理解以及一些名詞解釋。
Why Vue？
Vue 將自己推廣為一個平易近人的框架。這個框架是平易近人的，因為有很少的要求。如果在使用之前就了解 HTML5，CSS 和 JavaScript，則在上手的方面會較為快速。
我覺得 Vue 最主要的好處是可以讓對 Vue 沒甚麼經驗的開發團隊跟現行的技術結合，可以快速使用 Vue 來建立 Apps。再來是 Vue 的套件檔案不大，對於行動端來說，載入就不用花太多時間，這是非常理想的，如果我們透過行動裝置存取該網站，就可以快速載入。
另一個觀點是，Vue 已經將 React 的 Virtual DOM 以及 Angular 的 Directive 結合起來，對於前面已經熟悉這兩個或其一框架的工程師來說，上手 Vue 的難度也並不大。
最後， Vue 在社群擁有超過 137,000個關注，這程度的關注數量，表示如果有問題，社群可以很快地解決。
新技術永遠令人興奮。然而，由於瀏覽器兼容性問題，我們往往上版一個很棒的新畫面或是新的應用卻不斷得到投訴的過程並不是很有趣，常常會被一些奇怪的問題絆住或者是氣死。
Vue支持舊版瀏覽器，包括 Internet Explorer 9 及更高版本。
Vue.js 使前端簡化
模板(Template) 是 Vue 的重要組成部分。模板將 UI、資料和業務邏輯分開。資料和業務邏輯是用JavaScript編寫的。 UI 由 HTML 和 CSS定義。然後 Vue負責將這塊寫好的模板編譯成使用者看到的內容。
模板將兩件事隔離開來。首先，透過模板，我們可以最大限度地減少必須編寫的程式碼。透過使用模板，我們就不必一遍又一遍地編寫一樣的程式碼，想想看之前寫 HTML 一個畫面有3個卡片，如果靜態生成要寫多少行難以維護的 HTML。
其次，模板可以讓我們在資料變動時，不用主動做 UI 更改。使用模板，我們只需在 Mount 階段(後面會提到 Vue 的生命週期)更新一次 HTML，因為 我們產生的 UI 並不是透過 HTML 定義好的，而是由資料驅動。 UI 和資料透過宣告被綁定在前端。
Vue.js 載入快
- Angular 大小為 65.5 KB
- React 大小為 36.3 KB
- Vue 大小為 30.8 KB
相較於其他框架而言，Vue 的優勢在於檔案小的特性可以達到快速載入，在現代使用者不願意等待，如果載入過久，使用者會中離，透過快速呈現畫面來讓使用者會持續留下，不會因為載入時的鎖螢幕(Javascript 是單線程)以及載入慢的問題而離開。
並且 Vue 透過使用 Virtual DOM 使載入再加快速且在使用的體驗上可達到較為平滑的體驗。
Virtual DOM
DOM 是文檔對像模型(Document Object Model)的簡寫，我們一般透過 JavaScript 來操作 DOM，但是現今網頁的 DOM 元素數量都頗大，性能因此不是很好，於是 Virtual DOM 的概念就出來了。Virtual DOM 是透過以 JavaScript 物件模擬特定的 DOM 結構，進而產生的樹狀結構。舉例來說，我在 DOM tree 新增一個 node，會先在 Virtual DOM 中作改變，過陣子再跟 Real DOM 作比較，最後更新 DOM tree。
Lifecycle Of a View
Creation 階段是出現在當我們呼叫 new Vue() 時就會執行，他會先執行 beforeCreate 接著 Initialize State 這時會處理 event handle 等，接著會進到 created ，進入 compile 階段，完成 compile 後，會進到下個階段： Mounting
Mounting 階段主要是把 View 的內容塞到 DOM 裡面，觸發 beforeMount，當任何客製化的程式碼在 beforeMount 執行完之後， virtual DOM 會被建構完成，而這些 virtual DOM 會把真實的 HTML DOM 透過 el 元素作替換。當 virtual DOM 替換完成之後， mounted 會被觸發。在 mount 階段完成之後，會開始監聽資料是否有做改變，你的畫面會花大多數時間在監聽資料是否有改變，但如果原本定義的資料有作更改，則 Vue 會進入 Updating 階段。
Updating 主要的責任是修改 virtual DOM 以及在有必要時重新渲染 UI，如果一個與 UI 綁定的資料型態被改變，則 beforUpdate 會被觸發。在完成 beforUpdate 之後，Vue 會重新評估哪些屬性有改變，利用最少改動 virtual DOM 的方式來重新渲染 UI。此動作完成之後就會接著觸發 updated 函式。Updating 可以說是 Vue 生命週期最長的存在時間，他會持續監聽資料是否有異動來改變前端畫面，如果你需要 tear down 這個畫面， Vue 也有提供一個 Destroy 函式來給你使用，當你執行這件事的時候， Vue 進入到 Destroy 階段。
Destroy 階段在一開始會先進入到 beforeDestroy 函式作處理，接著 tear down virtual DOM，最後終止監聽任何改變。在最後，觸發 destroyed 函式，並且使這個 Vue 完成整個生命週期。值得一提的是，只有在開發者明確定義 Destroy 方法，這個階段才會發生，但如果使用者只是跳至別的頁面，Destroy是不會被執行的。所以你不能透過使用 beforeDestroy 跟 destroyed 來進入到Destroy 階段，你只能明確定義來讓這個階段發生，結束 Vue 的整個生命週期。
結論
對我來說，在選擇客戶端框架時還應該考慮其他因素。例如以我來說，我在開發時要考慮框架的支持度、維護程度以及他的 Licensing。
Vue 是的MIT許可。同樣使用此許可的還有 jQuery 和 Angular ；與此同時，React 使用 3-clause BSD license。
這篇文章簡單整理了我對於 Vue 的認識以及簡單的比較，接著也學習了 Virtual DOM 以及 Vue Lifecycle 的重要性，後面會繼續學習 Vue 的應用，以及撰寫成系列文。
