---
# System prepended metadata

title: 加碼 - React 與 Vue
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---

# 加碼 - React 與 Vue

## 起手：

今天不會完整的介紹 React 該如何撰寫，主要介紹兩者的差異，因此會使用 Vite 進行介紹


## 樣板語言：

- 使用 JSX
    - 寫在 JS 內的 HTML Template （被視為 JS，使用 JS 的邏輯
    - Vue → 寫在 HTML 的 Template （被視為 HTML、字串，使用的是 HTML 邏輯
- 部分語法的轉變，例如：htmlFor、onChange、className
    - 因為 JS 中不方便用這些名稱
    - Vue → 因為被視為 HTML，所以不會有這方面的衝突
- 結尾
    - 一定要有結尾
    - Vue → 看你心情
- 使用 `{}` 傳入變數、方法
    - 一律使用 `{}` 處理
    - Vue → 需要轉換為指令
- 相同之處
    - 都可以使用狀態處理畫面

體驗：

1. HTML 語法需要轉換，Bootstrap 語法不能直接貼近來
2. 建立元件，使用 function return 傳入模板
3. style 一定要寫成物件

範例：

- 陣列渲染

## 元件：

- 定義方式：
    - Vue → 物件
    - React → 函式 or Class（現在只用函式）
- 命名：
    - Vue → CDN、Vite 命名略有不同
    - React → 無論在哪都是大寫開頭
- 註冊
    - Vue → 區分全域註冊、區域註冊
    - React → 都是區域註冊
- 相同之處
    - 都有 Props
    - 作用域獨立
    - 都有各自的生命週期

體驗：

1. JS 基礎強的人，會覺得比 Vue 更簡單一些（只有一種寫法

## 狀態管理

Vue

- 定義：
    - Options API：在 `data()`
    - Composition API：使用 `ref` 、 `reactive` 定義
- 更新方式：
    - 雙向綁定
- 可否更新原始狀態值（例如陣列使用 push 新增資料）
    - 可

React

- 定義：
    - React hook：使用 `useState` 定義
- 更新方式：
    - useState 中的 set 方法
- 可否更新原始狀態值（例如陣列使用 push 新增資料）
    - 不可

體驗：

- 寫法對於習慣雙向綁定的開發者會不習慣
- 要非常熟悉 React 生命週期的概念

範例：

- Click 計數器
- onChange 更新資料
- useState 觸發的狀態更新
    - useState 與副作用 useEffect
- Todos

## React 必學的觀念

生命週期

- 每次更新狀態，整個函式都會更新
- 影響 →
    - 每次刷新，代表內部建立的變數、函式指向都會受到影響（須避免過度觸發
    - 使用 useEffect 來避免元件刷新的影響