# 前端面試題目 V4

## 架構

- 白板題（解決問題能力、邏輯能力）
- 切版能力
- 設計資料結構能力
- 功能架構規劃
- 框架技術能力
- 協作能力
- 額外技術分享
- 履歷相關問題

### 白板題
[Number of Pairs of Interchangeable Rectangles](https://leetcode.com/problems/number-of-pairs-of-interchangeable-rectangles/)

### 切版能力
[畫面](https://www.figma.com/file/uc5E7EU9kRc8ElY72W3vX2/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%A9%A6%E5%88%87%E7%89%88?node-id=0%3A1)

### 設計資料結構能力
以設備頁面查看共用資料，設計可依不同設備型號共用此畫面，設計此畫面的資料結構。
[設備頁面](https://www.figma.com/file/BBGEFwvxcQZ23HlHJ19bUX/%E5%B0%8F%E6%A8%B9%E5%B1%8B_%E8%A8%AD%E5%82%99%E6%95%99%E5%AD%B8%E9%A0%81%E9%9D%A2%E5%BB%BA%E7%BD%AE%2BQRcode?node-id=14%3A108)

### 功能架構規劃
- 如何管理 vue、style 的檔案結構
- header&footer component 導入時須配合舊畫面的考慮以[codepen](https://codepen.io/wallasehuang/pen/xxgNOxZ)來舉例
- [搜尋畫面](https://thehapp.com/space/result?rentType=hourly-order&city=%E8%87%BA%E5%8C%97%E5%B8%82&people=1&null)功能設計
1. 如何規劃此頁面的功能
2. 如何切版、設計 component、結構設計
3. 資料間的傳遞
4. 後端 api 設計與呼叫時機

### 框架技術能力
- 何謂前端框架，比較 react\vue\angular
- vue2\vue3 差異
- vue watch computed 差異，使用情境
- vue 雙向綁定原理
- v-show v-if 差別
- vue 中為何 data 是 function 而不是 object
- ...

### 協作能力
- 一個專案功能如何管理切割功能分配
- 過往管理專案時的設定目標、時程規劃等
- 描述你在開發一個網站時的工作流程嗎？
- 如何跟設計溝通協作
- 如何跟前後端其他程式人員協作

### 額外技術分享
- 前端效能優化，如何測量效能優化有效
- 使否有前端測試經驗？前端如何進行測試？
- 知道 functional programing 嗎？簡述？

### 履歷相關問題
- 個人經驗分享