Vue.js 為何需要框架與 Vue.js ？

為什麼要學框架？

HTML、CSS 以及 JavaScript 是身為前端不可或缺的技能組合，然而要投履歷時會發現許多公司都會要求至少要有一個框架的經驗，再加上一些工具才會達到應徵門檻，不求甚解的話很容易認為框架只是個公司需求，但可以反問的是，為什麼公司會有框架的需求呢？

在不同類型的公司可能會遇到不同的問題，團隊開發專案會需要配合互相的 code，翻修、維護舊專案則是要看前人寫的 code，就連自己想要在自己 side project 上加功能，都得看自己以前寫的 code。在哪都要看 code 的情況下，看 code 顯然就變成了一門值得探討的技術，並且延伸到命名規則、編寫風格規定等等，而框架就我認為在某種程度上是提升了看 code 這門技術的優雅性。

隨著時代的演進，網路開發已從一人包辦變成前後端分離，而分離出來的前端要實作的功能也越趨複雜，以致於程式碼的維護與管理越來越困難，如果公司沒有固定設計模式的情況下，不同專案的開發人員依自己喜好編寫開發架構，甚至維護他人專案時又採用自己的喜好，未來維護專案時將會需要花相對更長的時間在看 code，除了基本的 review code 似乎可以稍微防止這類的事情發生，若能依照各個框架本身提供的 API 、風格、邏輯與架構開發，下一個人要接手維護時只要懂得該框架的邏輯與用法就能繼續延續前人的程式碼，至於選用哪個框架則會依據公司專案的需求不同而有不同，另外也會因為時代的不同，而有不同的選擇可以考量。

jQuery 不好嗎，為什麼要用 Vue.js？

上個段落提到了不同的時代會有不同的選擇，作為前輩的 jQuery ，當時出現的歷史原因是 JavaScript 在早期的一些原生功能較為薄弱，並且當時瀏覽器不一致的問題使得同樣一段程式碼在不同瀏覽器會產生不同結果，
舉例來說，在操作 DOM 的時候，原生 JavaScript 可以使用 document.getElementById('test') 這種寫法去捕捉，再透過方法來將值輸入進節點。但使用 jQuery 的作法可以透過更簡單的方法如 $('#text').html() 就可以輕鬆達成，除此之外還有像是對於 AJAX 的發送、建立新的 DOM 元素、各種事件與動畫等等，jQuery 都提供更完善與簡潔的方法來解決他們。

至於 Vue.js 解決的主要問題在於 UI 與狀態同步的難處，假設有一個代辦清單的專案需求，不論原生 JavaScript 或是使用 jQuery，都得相對頻繁地的操作 DOM ，也因此使得網頁性能下降，而且在同步與非同步的難題中，容易漏了一個環節後就漸漸與 UI 脫離，並且這樣的做法也相對難以知道最後是由誰去更動了目標。而 Vue.js 則是以監聽特定節點中的值來觸發需要改動的狀態，透過綁定 HTML 元素，使用模板語法來將我們想要顯示的資料輸出。範例如下：
HTML 部分

<div id="app">
    {{ myData }}
    <!-- 使用花括弧可直接取得 Vue.js 實體中的資料 -->
</div>

JavaScript 部分

var vm = new Vue({
    el: '#app',
    data: {
        myData: '我的資料'
    }
})

這樣的做法除了在 HTML 部分可以更清楚的掌握整個元件的樣貌，往後也能透過 Vue 實體來控管整個狀態的運作。

由此可知 jQuery 解決的問題與 Vue.js 其實不太一樣，並且當時關注點分離著重的地方也不太相同（以前強調 HTML、CSS、JavaScript 要盡量分開，現在則是偏好以單一個元件為一個單位），所以我認為並非 jQuery 不好用，只是 Vue.js 更貼近目前前端的趨勢。但也並非完全就不用 jQuery，以往專案有用到 jQuery 的話，仍需要瞭解 jQuery 的用法，才能符合舊專案的形狀思維。

我還能靠 Vue.js 做到什麼？

除了以上 UI與狀態同步 的優點之外，Vue.js 身為一款靈活的漸進式框架，你可以決定在不同的專案中引入不同程度的 Vue.js，小至只使用他提供的資料綁定（Data Binding）功能；大則到可以藉由 Vue-cli 建立一個較為完整的單頁式應用程式(SPA, Single Page Application)，讓你殺雞焉用牛刀。

擁有相對平緩的學習曲線，不如 React.js 要求較高的 JavaScript 能力（需要使用大量的 es6 以及 JSX），不如 Angular 要學習許多內建的函式庫以及 TypeScript、Rx.js，並且擁有簡單易讀的文件，需要特定功能（router、vuex、nust）時再去使用也沒問題。

若是更加深度比較框架間的差異與優勢也可以參考下列文章：

• 全面的 React、Angular 和 Vue.js 比較指南
• JavaScript 框架大比拼

看完本篇文章不知道大家是否心中有個底要追 Vue.js 呢？而下一篇文章將會開始建立基礎環境，若還在猶豫不彷繼續走走，或許到後面你會愛上 Vue.js！