有了框架後做什麼都很方便，但因為太方便導致有時連工具負責哪一塊都功能有點霧颯颯，如果你搞不太懂 Vue、Veux、Vuetify、Nuxt.js 之間的關係、具體各自負責什麼事情的話可以參考這篇文章釐清自己的觀念喔！
Vue.js
➤ 過去只有 Javascript、HTML、CSS 時有什麼問題？
➤ 框架的優勢Vuex
➤ Vue過去傳值時面臨什麼問題？
➤ 如何解決這個問題？Vuetify
➤ 提供前端工程師豐富的 MD component
➤ 強大的社群支持並穩定更新
➤ 自由決定導入 componentNuxt.js
➤ Vue.js 的應用框架
➤ SSR 伺服器端渲染
Vue.js
一個優秀的 Javascript 框架
➤ 過去只有 Javascript、HTML、CSS 時有什麼問題？
- 難以維護：專案結構龐大時 Javascript、HTML、CSS 維護難度會成幾何式上升，各式各樣的邏輯都集中在 Javascript 裡面導致程式可讀性極低
- 效能低落：如果 Javascript 頻繁操作 DOM 元素時會不斷觸發 Reflow & Repaint 的流程，頁面重複渲染的過程會消耗大量效能
➤ 框架的優勢
- 資料與 UI 分離：過去 Javascript 要動態的去更新 DOM 來塞入資料，但框架透過資料雙向綁定，工程師可以專注處理資料的邏輯面
- 模組化的 UI：一個網站會有許多重複出現的元素(按鈕、表單、表格…)，在框架中可以這些常用的元素設計成 component，要使用時再根據實際需求填入資料及參數即可，大幅提升工程師理解與維護的能力。
- 更好的效能：採取 Virtual DOM 概念，當資料變動時先計算好要變動的地方，以此抵銷無意義的變更，並且重複使用已存在的 DOM 元素
Vuex
➤ Vue過去傳值時面臨什麼問題？
過去 Vue 裡面 component 的參數傳遞都是採用 emit跟 props ，但如果 component 的關係並非 parent/child 而是像下圖想要將 Component B 的資訊傳到 Component C ，這種操作不但需要很多 emit跟 props 還會造成程式碼閱讀困難
➤ 如何解決這個問題？
根據上面的問題，官方推出專門用來『狀態管理』的工具，你可以把它想像成 Vue 裡面的全域變數，將狀態(state)全部放在倉庫(store)來進行管理。
更新 state：在 Vuex 裡面，儲存狀態的為 State，component 需要更動 State 時，需要透過 Actions 發出一個 Commit 去呼叫 Mutations，再由 Mutations 去更改 State。
取得 state：而 component 的資料更新可以在 compute 裡面使用 mapGetters 使用 getters 的 function 或是用 mapState 直接取用 state 的資料
Vuetify
➤ 提供前端工程師豐富的 MD component
你可以把 Vuetify 當成 Vue 的 Material Design framework，他不但省去了你自己手工打造 UI component 的時間，還為每個 component 提供許多可以自由定義的 property 讓版型更加靈活。
➤ 強大的社群支持並穩定更新
截至今天在 Github 上有高達 30K 的星星，如果你在開發上遇到問題在他們 discord社區上發問也能很快得到解答。
官方每個禮拜都會穩定更新版本，相比於其他 Vue 的 framework 是非常穩定的
➤ 自由決定導入 component
官方稱為 Auto treeshaking，在使用 Vuetify 時你可能覺得他非常『肥』，裡面包了一堆你專案中用不到 component，但因為有 Auto treeshaking 的機制所以只會導入你有使用的 component
Nuxt.js
➤ Vue.js 的應用框架
把 webpack、vue loader、vuex、router 的設定都集中在一起，減少使用者的配置成本
➤ SSR 伺服器端渲染
因為由 server 端組成 HTML 後回傳，所以 Google 在 SEO 解析時可以很好的分析 DOM 元素，藉此提升網站的 SEO 水平
Nuxt.js 也是能做 SPA(無SSR)、產生靜態網頁
參考資源： Vuex 是什麼? 怎麼用?、前端框架的功能與優點
▶︎ 如果這篇文章有幫助到你1. 可以點擊下方「Follow」來追蹤我～
2. 可以對文章拍手讓我知道 👏🏻你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼▶︎ 如果你對工程師的職涯感到迷茫1. 也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
2. 也歡迎您到書局選購支持，透過豐富的案例來重新檢視自己的職涯
