# 第三週

## 前一週、考題的解析

### 前一週的考題

https://rpg.hexschool.com/#/training/12062289980008016609/board/content/12062289980029074236_12062289980029074238

**其他題型介紹：**

1. 主要開發紅色區塊
2. 使用 slot 渲染 綠色區塊
3. 抓出內層元素的高度，紅色的高度需展示五個（數量由 props 決定）
4. 當輸入數字時，需要改變滾動位置
5. 紅色區塊是 ul，預設需套用 v-focus（自訂 directive）


### Vue 測驗題

增加對於 Vue 的理論掌握度，測驗題：

[https://casper-wang.notion.site/Vue-3072091b8e0a4a0c8c16fb0d39fd802d?pvs=4](https://www.notion.so/Vue-3072091b8e0a4a0c8c16fb0d39fd802d?pvs=21)

可介紹的題目：2, 3, 6, 7, 9, 16, 17, 31, 32

此測驗題是 Vue 認證後，再透過 ChatGPT 重新產生，題目有多次確認，如果有誤可在與卡斯伯討論。

- 延伸 - 目前見過的考題類型：
- 什麼是 SFC
- transition 的用途？
- Vue 的作者是誰？
- v-if、v-show 的差異
- v-model 的用途
- 內層元件的 emit 其外層需要用什麼監聽觸發 ⭐
- v-for 不能使用 key 作為屬性
- Computed 預設是 readOnly？
- SFC 中不包含哪一個標籤
- template ref 要如何綁定在元素上 (ref=…)
- v-slot 的用途
- createApp({}).mount(’#app’) 的意思是… ⭐
- Vuetify 的用途是什麼？ （建立 RWD 網站的 UI Component）
- 如果網址是…，在 vue Router 該如何定義路由
- vue@latest init 之後會…？（用 vite、建立 SSR 專案…
- vue 用 cdn 有什麼好處？（there is no "build step" involved. This makes the setup a lot simpler, and is suitable for enhancing static HTML or integrating with a backend framework ⭐
- pinia 是做什麼用的？
- v-html 不會導致 XSS 攻擊？（**it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html` on trusted content and never on user-provided content.** ⭐
- vue 支援 TypeScript？
- v-if、v-for 同時使用？
- v-model 是什麼的縮寫？（@input="*event* => text = event.target.value"）
- watch 在初始化中，是否會先執行一次 ⭐
- computed 在初始化中，是否會執行一次 ⭐
- props 傳入的預設型別
- defineEmit 的撰寫方式
- transition 是否可以用在 v-show
- asyncComponent
- Provide, inject 的應用方式
- slot 的用途
- 如何引用 plugin

## 套件上的運用

### Vue Loading Overlay

https://www.npmjs.com/package/vue-loading-overlay

### Pinia 進階

1. 基本運用：
- `ref()` 就是 `state` 屬性
- `computed()` 就是 `getters`
- `function()` 就是 `actions`

2. 搭配 Composable 的手法：

→ 案例：滑鼠座標

→ 案例：取得資源後轉址

3. $Patch

$Patch 無法在 setup 風格中撰寫：https://github.com/vuejs/pinia/discussions/1012

- 避免錯誤的覆蓋
- 採用 “更新” 的機制

4. $subscribe

監聽及偵錯

## 實戰策略

Composition API 改寫課程專案。