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

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

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

大綱

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

一、事先準備
 ➤ 創建 Nuxt.js 專案
 ➤ 下載 & 安裝 Docker
二、在 local 把 Nuxt.js 專案 Build 成 Docker Image
 ➤ 撰寫 dockerfile & .dockerignore
 ➤ 把 Nuxt.js 專案 build 成 Docker Image
三、將 Docker Image 發佈到 dockerhub 上面

一、事先準備

創建 Nuxt.js 專案

如果你已經有 Nuxt.js 的專案可以跳過下面的操作流程

STEP 1：創建一個 Nuxt.js 專案

$ yarn create nuxt-app nuxtjs-tutorial

在創建過程中會問你一些問題，你可以參考筆者的選擇：

STEP 2：讓 Nuxt.js 專案跑起來

$ cd nuxtjs-tutorial 
$ yarn dev

下載 & 安裝 Docker

STEP 1：下載 Docker

前往官網下載 Docker 安裝檔

安裝過程就是狂按下一步，就不在多做介紹，下載後要把 App 打開依照步驟執行才算是完成安裝喔！

STEP 2：註冊 Docker

在官網註冊 docker 帳號

STEP 3：在 local 端登入 docker

$ docker login

輸入剛剛註冊的帳號密碼

二、在 local 把 Nuxt.js 專案 Build 成 docker image

撰寫 dockerfile & .dockerignore

STEP 1：先用指令建立這兩個檔案

$ touch dockerfile
$ touch .dockerignore

STEP 2：撰寫 dockerfile

# node 運行環境
FROM node:12.19.0

# 存放image的目錄
RUN mkdir -p /app
COPY . /app
WORKDIR /app

# 如果需要相關的環境變數請自行調整路徑
#COPY ./env/.prod-env /app/env/.prod-env

# 對外的port
ENV HOST 0.0.0.0 
EXPOSE 3000

# 安裝套件並build專案
RUN yarn
RUN yarn build

# 執行專案
CMD [ "yarn", "start" ]

原始碼：dockerfile（GitHub Gist）

STEP 2：撰寫 .dockerignore

npm-debug.log
node_modules

原始碼：.dockerignore（GitHub Gist）

把 Nuxt.js 專案 build 成 Docker Image

STEP 1：Build Docker Image

在專案目錄下輸入指令後耐心等待打包，docker_example 是這個 image 的名字

docker build -t docker_example .

STEP 2：Run Docker Image

輸入指令確認 image 是否成功

docker run -it — rm -p 80:3000 docker_example

特別注意『80 是對外 port，3000 是 container 的 port』，docker_example 就是剛剛建立的 image 名稱

上圖 172.xx.xx.x:3000 的網址點開來是沒有畫面的，因為我們已經透過指令改變對外 port 到 80 了，在網址列上輸入 http://localhost/ 就能成功看到供果嚕～

三、將 Docker Image 發佈到 dockerhub 上面

STEP 1：給剛剛建立的 Image 一個 tag，username 是你 Doacker 的帳戶，xxximage是你希望這個 Image 在 dockerhub 上呈現的名字

docker tag docker_example username/xxximage

STEP 2：列出目前存在的 Images

docker images

STEP 3：把這個 Image 丟到 dockerhub 的 repositories

這個 push 的過程會根據你產生 Image 的大小決定，通常要等一段時間

docker push username/xxximage

STEP 4：在自己的 Docker 帳戶上看到剛剛上傳的 Docker Image

之後要部署這個 Docker Image 到其他 Server 就只需要輸入下面指令就能獲得嚕～

docker pull username/xxximage

希望這篇文章有幫助到使用 Mac 開發 Nuxt.js 專案的朋友們～

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 是什麼? 怎麼用?、前端框架的功能與優點

事前準備

1. 你有GCP的帳戶(沒有就直接去開一個)
2. 你有信用卡(因為GCP serverless服務一定要綁信用卡，就算你一塊錢都沒花，你還是得綁定)
3. 你會用git(如果不會你要抄襲前人的成果都很難)
4. 如果有mac電腦會是最棒的，因為作者的操作都是在mac的環境

文章目標

1. 根據官方文件建立Nuxt專案
2. 開啟GCP App Engine
3. 將Nuxt專案deploy到GCP

SETP 1/5 : 建立Nuxt專案

這裡是官方安裝說明文件，根據我的個人經驗，你每個禮拜都會得到不一樣的錯誤訊息(感覺他們工程師根本沒有qa就直接上正式版本了…)，以下為我操作的及遇到的錯誤及相關解決方案。

創建nuxt專案，project-name請自由發揮

$ yarn create nuxt-app <project-name>

接下來會問你一堆問題，根據我之後會撰寫的文章類型，你可以跟我做一樣的設定

只要你運氣夠差，你就會遇到這個錯誤：

throw new SAOError(`Failed to install ${packageName} in ${cwd}`)

別怕，仔細看錯誤訊息，你會發現是因為local端的node版本過低，最新的nuxt需要你的node版本保持在13.7以上，建議你可以使用nvm這個套件來做local端node的版本控制

調整完node版本後再下一樣建立nuxt的指令

$ yarn create nuxt-app <project-name>

這次就會通過嚕～接著下指令確認使否正常跑

cd nuxt_baobao
yarn dev

如果成功出現下面的畫面就恭喜你嚕～

SETP 2/5 : 將nuxt專案build起來

因為實際運行你總不可能把整個專案丟到GCP，所以要下指令build這個專案，那他變小一點

yarn build

如果沒發生意外應該會build失敗(我真的懷疑他們到底有沒有做過上線測試…)

因為很多人遇到這個問題，有興趣可以參考這篇文章，不然就複製下面指令執行

nvm use 14.4
yarn add autoprefixer@9.8.1

安裝完套件再下一次yarn build指令就能順利完成

SETP 3/5 : 開啟GCP App Engine

我建議你先建立一個GCP新的專案來做這次的操作，建立好專案去App Engine建立應用程式

SETP 4/5 : 下載Google Cloud SDK

如果你可以根據官方文件操作，裡面有提供各式各樣的安裝方法，一開始我是直接下載壓縮檔來安裝，但遇到各種悲劇…

Welcome to the Google Cloud SDK!
ERROR:root:code for hash md5 was not found.

然後網路上你查到大部分的答案都是唬爛你的

所以我個人建議你使用homebrew安裝吧

brew cask install google-cloud-sdk

安裝後你可以嘗試看看

gcloud init

如果不發生意外應該又是一大串的錯誤…這個時候的問題通常是python版本的問題，請指定你執行gcp的python版本

export CLOUDSDK_PYTHON=python3

之後再執行gcloud init應該就是一路通暢了，裡面會有一些讓你登入以及選擇專案的選項就按造個人需求調整即可

SETP 5/5 : deploy Nuxt專案到GCP App Engine

如果你上面的操作都很順利，你接下來就可以嘗試把本地的nuxt專案發布到GCP上面了，首先你要在nuxt專案做以下調整，這裡是官方文件(跟著照做會錯誤)：

新增app.yaml檔案，這個檔案是在deploy的時候使用的

PS.在這裡我要特別提醒一件事情，一但你的環境(env)設定為flex，你醒來的時候帳單就有可能爆掉，所以這個部分請謹慎，這是我端午連假完打開GCP帳單發現的慘痛經驗，使用標準環境才會有免費配額，但還是會扣一點費用(ex: Google Storage、Could Build…)。

runtime: nodejs12

instance_class: F1

automatic_scaling:
  max_instances: 1

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'
  NODE_ENV: 'production'

原始碼：nuxt_baobao_app.yaml（GitHub Gist）

調整package.json檔案，要在dependencies加上“@nuxtjs/vuetify”，並加上這個專案nodejs的版本(本範例為14.4)

{
  "name": "nuxt_baobao",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.11.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "autoprefixer": "9.8.1",
    "chart.js": "^2.9.3",
    "hchs-vue-charts": "^1.2.8",
    "nuxt": "^2.13.0",
    "vue-chartjs": "^3.5.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.0.5"
  },
  "engines": {
    "node": "^12"
  }
}

原始碼：nuxt_baobao_package.json（GitHub Gist）

完成以上設定後在專案目錄下指令

gcloud init

這裡會讓你再次確認自己的設定檔(是否初始化、新增)，登入的google帳號，選擇雲端專案(就是你剛剛新增的那個專案)

在完成上述設定後就可以輸入以下指令來deploy啦(這裡會讓你在確認一下deploy發布的專案位置)

gcloud app deploy

如果你看到以下畫面就要恭喜你了

輸入下面指令可以檢視你的網頁是否發布成功嚕～

gcloud app browse

如果有問題歡迎在下方回覆，如果這篇文章有讓你少走彎路請用力拍手喔～