# 第一週

1. 如何在 Options API 與 Composition API 之間做轉換
1. setup()
2. `script setup`
3. 使用 Ref 與 Reactive 來建構資料
2. 其他常見的 Options API，如何在 Composition API 之間做使用
1. onMounted
2. watch
3. computed
4. wetchEffect
3. 就當前觀念，重新撰寫 TodoList

## 如何在 Options API 與 Composition API 之間做轉換

**原本的 Options API**

- 會把 Vue 的方法使用物件屬性分離
- 優點：新手很容易知道程式碼該怎麼寫，該寫在哪
- 缺點：商業邏輯與程式邏輯無法自由安排

### 如何開始使用 Composition API

如何在 html 環境中使用 setup 與 Composition API

**Composition API 特點**

- 方法有需要才引入，並且可以自行決定放置位置
- 優點：資深開發者更能按照自行需求撰寫
- 缺點：新手難以抓到規則

### 基本知識

關於 Composition API 的進階理論知識…，我們留到下一週再做介紹 😄

- 關於 setup 生命週期的位置
- https://vuejs.org/api/options-lifecycle.html#beforecreate
- 如何使用 setup 生命週期
- 沒有 `this`
- 建立資料
- 建立方法
- 渲染畫面、綁定方法
- **注意：return**

## 課前額外介紹：pnpm

快速，省空間的 套件管理工具

https://pnpm.io/zh-TW/

## 啟用 Composition API

- 在 Vite 中使用 script setup
- 特點：不需要 return
- ref
- 基礎定義值的方式
- 取值、賦予值的方式
- 優點：
- 適用全部情境
- 缺點：
- 要打上 .value
- Reactive
- 可以用來定義物件
- 優點：
- 不用加上 .value
- TS 型別判斷準確
- 缺點：
- 不能重新賦予值
- 僅能用在物件型別
- 簡而言之：官方推薦 ref 到底就好了

## 其他 Composition API

### onMounted

- 是一個單獨 hook
- 一個元件可以有多個 onMounted

常見用法：

- 初始化使用
- 非同步請求
- DOM 操作（搭配 ref，類似於 this.$refs…）

### Computed

與 Options API 用法原則上相同

範例：

const sortPeople = computed(() => {
  return [...people.value].sort((a, b) => ascending.value ? a[sortBy.value] - b[sortBy.value] : b[sortBy.value] - a[sortBy.value]);
});

### Watch

與 Options API 用法原則上相同，不過因為 Reactive、Ref 宣告方式略有不同，所以對於深層監聽結果也會有些差異

// Deep Watch
const obj = reactive({
  name: 'Casper',
  innerObj: {
    name: 'innerObj'
  }
})
watch(obj, () => {
  console.log(obj.name);
})

const objRef = ref({
  name: 'Casper',
  innerObj: {
    name: 'innerObj'
  }
})
watch(objRef.value, () => {
  console.log('objRef.value', objRef.value);
})

### WatchEffect

同時結合 Watch 與 Computed 的概念，不需要明定監聽值為何就能運行函式

## 實作練習，TodoList

1. 新增資料
2. 呈現資料
3. 可以移除指定資料
4. 可以切換指定資料的狀態（done）
5. 可以編輯指定資料的內容
6. 可以依據狀態，呈現資料的內容（使用 computed
7. 每次輸入文字時，自動儲存至 LocalStorage