## HTML
### 1. 語意化標籤
例如 `<header>`, `<section>`, `<footer>` 讓結構一目了然有助於開發體驗，也因為結構清晰可以讓 SEO 分數更高。
## CSS
### 1. CSS 樣式的優先順序
**定義解釋：**
- **Inline Style**
是指直接用 `style=''` 將樣式寫在 HTML tag 中。 在 Vue Template 中可以用靜態 `style=''` 也可以用動態 `:style=''`
- **Internal Style**
如果是純 HTML 文件，指的是放在 `<style>` 標籤中的樣式。如果是 Vue，則是放在 `<style scoped>` 中的樣式。
- **External Style**
如果是純 HTML 文件，指的是透過 `<link>` 標籤引用的外部樣式。如果是 Vue，可以透過 `<style src="">` 來外部引入樣式。
**優先順序：**
- **純 HTML 文件 ([**CodePen 實作測試**](https://codepen.io/ehxqjekz-the-reactor/pen/bNGWrqP)):**`inline` > `internal` = `external` (後兩者依先後順序而定)
- **Vue 組件([**CodeSandBox實作測試**](https://codesandbox.io/p/devbox/unruffled-tdd-dr8gsw)):** `inline` > `internal` > `external`
- `!important` 又會比 `inline` 權重更高！
### 2. 選擇器的優先順序
important! > inline style > id > class = attribute = psedo class .....
### 3. box-sizing, border-box
當 width 相同時，若使用 `box-sizing: border-box;`，就會將 padding 和 border 包含進寬度中。而若未指定為 `box-sizing: border-box;`，預設是 `box-sizing: content-box;`，寬度就會是 width + border + padding
=> [**CodePen 實作練習**](https://codepen.io/ehxqjekz-the-reactor/pen/raNmGQQ)
### 4. rem 與 pixel 差別
px 是絕對值，rem 是相對值，相對於 `<html>` 這個根元素的大小，以字體為例，預設 `<html>` 的字體大小為 16px。
=> [**CodePen 實作練習**](https://codepen.io/ehxqjekz-the-reactor/pen/LEYyzKE)
### 5. `display: none` 和 `visibility: hidden` 的差別
- `display: none` 不會將元素渲染出來，不會佔用空間，DOM 節點不存在。
- `visibility: hidden` 會將元素渲染出來，會佔用空間，DOM 節點存在。
=> [**CodePen 實作練習**](https://codepen.io/ehxqjekz-the-reactor/pen/YPzVEXW)
### 6. position 有哪些類別？
- absolute: 絕對定位
- relative: 相對定位
- sticky: 固定定位
- fixed: 特殊的相對定位
- static: 靜態定位（預設 position）
=> [**CodePen 實作練習**](https://codepen.io/ehxqjekz-the-reactor/pen/pvoPdEQ)
## UnoCSS
### 1. config 檔案可以做什麼設定
shortcuts 就是一個快捷，可以把多個樣式設定成縮寫。
rules 可以更客製化
其他就包含 theme, preset 等等。
## JavaScript
### 1. 什麼是閉包
簡單來說就是當外層的函數運行結束後，內層的狀態依然可以被記得。
今天面試中提到抽離出 Vue Composables 就是運用這樣的概念！
=> [**CodeSandBox實作練習**](https://codesandbox.io/p/devbox/brave-rubin-y97y9z?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A13%2C10)
### 3. `for` loop 和 `forEach` 差別
1. 語法上
**for loop**
```javascript=
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]); // 1, 2, 3, 4, 5
}
```
**forEach**
```javascript=
numbers.forEach((num) => {
console.log(num); // 1, 2, 3, 4, 5
});
```
2. 差異：`for` loop 可以加入 `break` 或是 `continue`, `forEach` 則是無法終止操作。
### 4. map 和 forEach 差別
最大差別就是 `forEach` 不會回傳值，只會針對陣列中的每個元素作用。
但是 `map` 會將整個陣列回傳！
### 4. Arrow function 和一般函數的差別
1. 寫法簡潔，可以省略 return
```javascript=
const addSimple = (a, b) => a + b;
console.log(addSimple(2, 3)); // 5
```
但一般函數就必須把 return 寫出來。
2. this 用法：在同一個 composable 函數中，箭頭函數無法使用 this 來找到對應值，會向外找。但一般函數就可以正常引用。
舉例：
```javascript=
const user = {
name: 'HY',
normalFunction: function() {
console.log(this.name); // `this` 指向 `user`
},
arrowFunction: () => {
console.log(this.name); // `this` 指向外層 (Window 或 undefined)
}
};
user.normalFunction(); // HY
user.arrowFunction(); // undefined
```
3. 箭頭函數無法使用 `new` 方法，一般函數可以使用。
### 4. Event Loop 是什麼？
因為 JavaScript 本身是 single-thread 的，所以當主程式、非同步的程式（例如需要等待後端回傳 response）為了不用一直等待後端回傳使執行整個卡住導致體驗不佳，我們就有這個機制。
當主程式執行完後，Event loop 這個機制就會依序讓 callback function（像是 setTimeout 或是 API 請求）依照先進先出的順序去執行。
例如：
```javascript=
console.log("主程式1");
setTimeout(() => {
console.log("非同步任務1");
}, 100);
setTimeout(() => {
console.log("非同步任務2");
}, 100);
console.log("主程式2");
```
=> 執行結果是 主程式1, 主程式2, 非同步任務1, 非同步任務2
## Vue
### 1. Composables 跟使用 Pinia 的差別？
接續閉包的概念，composables 中可以用 ref 加入狀態，再於 .vue 檔案中引用，但他的狀態一樣是暫時性的，作用範圍也是引入 composables 的頁面或組件，不像 pinia 可以作用於全域範圍，並且可以進一步透過 localStorage 等方法永久保存。
=> [**CodeSandBox實作練習**](https://codesandbox.io/p/devbox/brave-rubin-y97y9z?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A13%2C10)
### 2. 什麼是 `defineExpose`
`emit` 可以子傳父，`defineExpose` 也可以子傳父！差別在於 `emit` 需要透過事件觸發來啟動，`defineExpose` 是指要把想要暴露的值放在裡面就可以了。
=> [**CodeSandBox實作練習**](https://codesandbox.io/p/devbox/3ytk9y?file=%2Fsrc%2FApp.vue%3A23%2C10)
### 3. 在 template 上面使用 ref 代表什麼意思
就是建立一個 reference，讓我們可以抓取元素並操作元素。
=> [**CodeSandBox實作練習**](https://codesandbox.io/p/devbox/gdr9zy)
### 4. `shallowRef` 是什麼
淺層的追蹤。當 ref 是物件時，使用 `shallowRef` 來定義，當物件的深層屬性更新時，並不會觸發頁面重新渲染。但是 ref 就會觸發重新渲染。
## TypeScript
### 1. 使用 TS 有什麼好處？
除了稍早提到增加可讀性、易於維護跟重構以外，主要就是型別安全，在執行前的編譯階段可能就會顯示出錯誤，可以提早排錯。
### 2. `type` 和 `interface` 差別
1. `interface` 可以透過 `extends` 擴充，也可以合併。
=> 適合用在描述物件，尤其是 API 回傳的 response
3. `type` 不能合併。但可以定義 `union type`。
=> 適合定義固定的選項。
### 3. `enum` 和 `interface` 差別
1. `enum` 適合用在有固定值的狀態。e.g. 狀態碼
2. `enum` 可以做字串的映射：用 value 取得 key 也可以用 key 取得 value，`interface` 則不能。
3. `interface` 可以透過 `extends` 擴充，也可以進行合併，`enum` 沒有這些彈性，不能修改。
### 3. Union Type 使用時機
例如當變數可能有多種型別時（可能是這個，也可能是那個，不是非常確定）
```javascript=
let id: string | number;
```
### 4. Pick, Omit 是什麼
**Pick: 把某個屬性挑出來**
```javascript=
interface User {
id: number;
name: string;
age: number;
}
type UserName = Pick<User, 'name'>;
const userName: UserName = { name: "HY" };
console.log(userName); // HY
```
**Omit: 把某個屬性排除掉**
```javascript=
interface User {
id: number;
name: string;
age: number;
}
type UserWithoutAge = Omit<User, 'age'>;
const userWithoutAge: UserWithoutAge = {
id: 123,
name: "Tyler"
};
console.log(userWithoutAge); // { id: 123, name: 'Tyler' }
```
### 5. 有一個陣列，若參數是字串則回傳字串，若參數是數字則回傳數字 (布林值...? 有點忘記題目QQ)
Sign in with Wallet
Connect another wallet