用工具完成任務 ≠ 了解工具。

隨著時代演進，大部分的公司都採用框架來加速開發效率；自從有了框架，工程師可以更輕鬆，並且在更短的時間完成專案。

儘管做事的效率提高了，但因為許多核心概念已經被框架取代，導致部分開發人員做得出來功能，卻無法解釋怎麼做出來的。

大綱

1. 了解文章結構，快速掌握面試技巧
   • 1.1 文章結構
   • 1.2 為什麼用這種角度分享面試經驗？
2. 請說明你現在專案用到的前端框架
   • 2.1 面試官為什麼會問？
   • 2.2 面試官想從答案確認什麼？
   • 2.3 筆者提供的簡答
   • 2.4 [小提醒]簡答的好處
3. 回答問題所需具備的知識
   • 3.1 Vue.js
   • 3.2 Vuex
   • 3.3 Vuetify
   • 3.4 Nuxt.js
4. 衍伸問題
   • 4.1 在 Vue 框架中，watch 跟 computed 的差異及使用時機
   • 4.2 在 Vue 框架中，computed 跟 method 的差異及使用時機
   • 4.3 有使用過 React 嗎？為什麼會選用 Vue 開發呢？

1. 了解文章結構，快速掌握面試技巧

1.1 文章結構

從今天開始，我會分享面試官常問的問題；文章會以下面的結構呈現：

• 面試官為什麼會問？
  主要分成 5 個方向與讀者分享出題邏輯
  • 履歷資訊
  • 職缺所需具備的技術
  • 常見面試題
  • 工作相關問題
  • 人格特質
• 面試官想從答案確認什麼？
  • 技術面
    用考題判斷你是否真的掌握這門技術。
  • 經歷面
    用追問細節的方式核實你經歷的真實性。
  • 人格特質
    面對各種問題的應對進退是否符合公司需求。
• 筆者提供的簡答
  筆者會附上自己在面對問題時的答覆，這塊僅供參考。
• 回答問題所需具備的知識（技術考題）
  筆者會統整問題涉及的知識面，讓讀者不會知其然而不知其所以然。
• 衍伸問題
  大部分的面試官會根據你的回答，詢問他們想知道的細節；所以我也會分享從這個問題出發的衍伸問題。

1.2 為什麼用這種角度分享面試經驗？

就算同為全端工程師，每個人的技能樹也都略有不同；這個系列文不是為了猜題而寫，而是希望讀者可以透過它了解面試官出題邏輯、自己答題方向；如果可以，你也可以參考筆者的文章架構，做出屬於自己的面試攻略，建議先把知識面整理完，再用自己的口吻整理答案。

網路的解答未必都是正確的，在整理的過程你甚至會發現部分邏輯互相衝突；如果未經思考直接照抄，你會連錯誤的知識一起吸收。

2. 請說明你現在專案用到的前端框架

2.1 面試官為什麼會問？

因為履歷資訊中表明面試者具備前端（Frontend）的技能：

• Nuxt.js：Vue.js & Vuetify & Vuex
• HTML5、CSS、JavaScript

其中Nuxt.js：Vue.js & Vuetify & Vuex都是框架，面試官想知道你對這些框架了解的深度。

2.2 面試官想從答案確認什麼？

• 想看你能否解釋這些前端框架的關聯性
• 如果要你單純解釋某個框架的功能，你是否能應對
• 如果能說出這些框架解決了哪些問題更好

2.3 筆者提供的簡答

目前使用 Nuxt.js 這個 Vue.js 的應用框架，並使用 Vuetify 提供的 UI Component 來設計版型；同時利用 Vuex 來管理 Vue 框架下的全域變數讓傳值更加直覺。

2.4 [小提醒]簡答的好處

你的簡答必須包含關鍵字，並盡量控制回答時間最多不超過 1 分鐘。

• 簡答的好處
  • 面試官會依照自己感興趣的技術深入詢問。
  • 因為回答的時間短，如果你的回答面試官不滿意，這也只是一個小橋段。
  • 雙方有來有往，營造出同事間的交流感。
• 詳答可能的壞處
  • 如果超級詳盡的解答每個問題，整場面試會變成只有你在說。
  • 萬一你回答的方向跟面試官期待不符，你就會在錯誤的道路越走越遠還不知道要停下來。

3. 回答問題所需具備的知識

3.1 Vue.js

一個優秀的 JavaScript 框架

• 過去只有 JavaScript、HTML、CSS 時有什麼問題？
  • 難以維護
    專案結構龐大時，JavaScript、HTML、CSS 維護難度會成幾何式上升，各式各樣的邏輯都集中在 JavaScript 裡面導致程式可讀性極低。
  • 效能低落
    如果 JavaScript 頻繁操作 DOM 元素，會不斷觸發 Reflow & Repaint 的流程，頁面重複渲染的過程會消耗大量效能。
• 框架的優勢
  • 資料與 UI 分離
    過去 JavaScript 要動態的去更新 DOM 來塞入資料，但框架透過資料雙向綁定，工程師可以專注處理資料的邏輯面。
  • 模組化的 UI
    一個網站會有許多重複出現的元素（按鈕、表單、表格…），在框架中可以將這些常用的元素設計成 Component，要使用時再根據實際需求填入資料及參數即可，大幅提升工程師理解與維護的能力。
  • 更好的效能
    採取 Virtual DOM 概念，當資料變動時先計算好要變動的地方，以此抵銷無意義的變更，並且重複使用已存在的 DOM 元素。

3.2 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 的資料更新，可以在 computed 裡面使用 mapGetters 的 function，或是用 mapState 直接取用 state 的資料。

3.3 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。

3.4 Nuxt.js

• Vue.js 的應用框架
  把 Webpack、Vue loader、Vuex、Router 的設定都集中在一起，減少使用者的配置成本。

• SSR 伺服器端渲染
  由 Server 端組成 HTML 後回傳，這樣的做法讓 Google 在 SEO 解析時可以很好的分析 DOM 元素，藉此提升網站的 SEO 水平。

  備註： Nuxt.js 也是能做 SPA（無 SSR），或產生靜態網頁。

4. 衍伸問題

大部分的面試官在聽完你的簡答後，會以此為基礎做深入的詢問；如果要你深入介紹每個框架的職責，你可以參考「3. 回答問題所需具備的知識」來回答；除此之外，下面筆者再分享幾個常見的衍伸問題。

4.1 在 Vue 框架中，watch 跟 computed 的差異及使用時機

考點：確認是否掌握框架基礎知識

watch 與 computed 都在觀察「值」的變動：

• computed
  有「快取」的特性，根據依賴值的變化去計算一個結果（多對一）。
• watch
  支援「非同步」，監聽一個值的變化去做一系列的事情（一對多）。

4.2 在 Vue 框架中，computed 跟 method 的差異及使用時機

考點：確認是否掌握框架基礎知識

• computed
  有些複雜邏輯的運算會花很多時間；但靠著「快取」的特性，只要依賴的「值」沒有改變，它就不需重新運算，以此節省效能。
• method
  只要被呼叫，它每次都會執行，就算這些執行結果是相同的；適用於「不需要快取」的計算。

4.3 有使用過 React 嗎？為什麼會選用 Vue 開發呢？

考點：你是否了解或是曾經用過同類型的技術，以及現在專案框架選擇的理由

因為前輩先將 Vue 導入公司的專案，所以我是先學習 Vue 來開發網頁前端；對有接觸過 JavaScript 的工程師來說，Vue 算是一個可以快速上手的框架。

我個人在業餘時間有使用 React Native 來撰寫 App，因此覺得如果熟悉 Vue，React 的學習曲線不會太過困難；兩者都是優秀的前端框架，主要還是看團隊成員對哪個比較熟悉。

讀者可以透過以上幾個前端框架的問題，初步了解面試官出題邏輯，以及答題方向。

感謝大家的閱讀，如果喜歡我的文章可以訂閱接收通知；如果有幫助到你，按Like可以讓我更有寫文的動力，我們明天見～

參考資源：

1. 5 分鐘帶你搞懂 Vue、Vuex、Vuetify、Nuxt.js 之間的關係(筆者部落格)
2. Vuex 是什麼? 怎麼用?
3. 前端框架的功能與優點

在許多人的幫助下，本系列文章已成功出版，除了添加新的篇章，更完善了每個案例的應對進退；如果對現在的職涯感到迷茫，也許這本書能帶給你不一樣的觀點～

天瓏書局： https://www.tenlong.com.tw/products/9786263334571

Vue.js
➤ 過去只有 Javascript、HTML、CSS 時有什麼問題？
➤ 框架的優勢
Vuex
➤ Vue過去傳值時面臨什麼問題？
➤ 如何解決這個問題？
Vuetify
➤ 提供前端工程師豐富的 MD component
➤ 強大的社群支持並穩定更新
➤ 自由決定導入 component
Nuxt.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 是什麼? 怎麼用?、前端框架的功能與優點