iT邦幫忙

2021 iThome 鐵人賽

DAY 10
1
Software Development

全端工程師生存筆記系列 第 10

[面試][前端]請說明你現在專案用到的前端框架

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

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

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

大綱

  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,還會造成程式碼閱讀困難。
    https://ithelp.ithome.com.tw/upload/images/20210919/20103256xISCJD4fp0.png
  • 如何解決這個問題?
    根據這個問題,官方推出專門用來「狀態管理」的工具,你可以把它想像成 Vue 裡面的全域變數,將狀態(state)全部放在倉庫(store)來進行管理。
    https://ithelp.ithome.com.tw/upload/images/20210919/20103256km75gTStBx.png
    • 更新 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 社區上發問也能很快得到解答。
    https://ithelp.ithome.com.tw/upload/images/20210919/20103256WDS6PZEwGi.png
    官方每個禮拜都會穩定更新版本,相比於其他 Vue 的 Framework 是非常穩定的。
    https://ithelp.ithome.com.tw/upload/images/20210919/20103256bglW5jY3Jp.png
  • 自由決定導入的 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
    有些複雜邏輯的運算會花很多時間;但靠著「快取」的特性,只要依賴的「值」沒有改變,它就不需重新運算,以此節省效能。
  • methed
    只要被呼叫,它每次都會執行,就算這些執行結果是相同的;適用於「不需要快取」的計算。

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

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

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

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


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

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

參考資源:

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

我在 Medium 平台 也分享了許多技術文章
❝ 主題涵蓋「MIS & DEVOPS資料庫前端後端MICROSFT 365GOOGLE 雲端應用自我修煉」希望可以幫助遇到相同問題、想自我成長的人。❞


上一篇
[職涯]工程師選擇公司要考慮哪些細節?常見迷思分享
下一篇
[面試][前端]如何判斷專案要使用 CSR 還是 SSR?
系列文
全端工程師生存筆記30

尚未有邦友留言

立即登入留言