在前一篇(Day 1)，我們從歷史與演進的角度理解了 Vue 為什麼需要持續更新。

今天，我們聚焦在 Vue 3 的核心特性，這些功能不僅解決了 Vue 2 的痛點，也為後續的新特性（例如 Vapor Mode、Alien Signals）奠定基礎。

Vue 3 的兩大改進層面

1. 核心層（引擎改造）：全新 Proxy-based 響應式系統、更快的渲染、更小的體積
2. 語法層（開發者體驗）：Composition API、Fragments、Teleport、Suspense 等

Vue.js 3.x 最佳化概覽
https://www.cnblogs.com/CherishTheYouth/p/CherishTheYouth_20220421.html

Vue 3 相比 Vue 2，不只是「版本升級」，而是帶來了幾個關鍵革新，讓框架在 效能、可維護性、開發體驗 上都有大幅提升。

以下挑出最重要的幾點革新說明

Composition API — 邏輯更清晰、可重用性更高

相比 Vue 2 的 Options API（data、methods、computed 分散在不同區塊），Composition API 讓邏輯能更集中與重複利用，開發者可以透過 setup 函式來組織和分離邏輯，使得大型應用的維護更加容易。

好處：
- 可讀性高：相關邏輯放在一起。
- 可重用性：抽取成「可組合函式（composable）」。
- TypeScript 支援更友好。

以下是一個計數器，分別使用 Options API 和 Composition API 寫的，可以觀察到以上的好處都在範例中逐一展現：

Vue 2 (Options API)

export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increase() { this.count++ }
  }
}

Vue 3 (Composition API)

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref<number>(0)

function increase() {
  count.value++
}
</script>

<template>
  <button @click="increase">count: {{ count }}</button>
</template>

Proxy-based Reactivity（全新響應式系統）效能提升

Vue 3 在效能上進行了最佳化，主要表現在更快的虛擬 DOM 渲染和更新，而這是透過使用 Proxy 來實現更高效的資料監聽。

• Vue 2 使用 Object.defineProperty → 無法監聽新增刪除屬性、Array 索引變動。
• Vue 3 使用 ES6 Proxy → 可攔截所有操作，性能更佳且更直觀。

改善：

• 監聽物件屬性新增/刪除
• 監聽陣列索引、長度變動
• 記憶體更省

Vue 2 響應式系統：Object.defineProperty

vm.user.age = 20  // 新增屬性無法被追蹤，響應失效

Vue 3 響應式系統：Proxy

<script lang="ts" setup>
import { reactive } from 'vue'

const user = reactive({ name: '小明' })

// 新增屬性也會響應
user.age = 20
</script>

<template>
  <p>{{ user.name }} - {{ user.age }}</p>
</template>

更小的包大小

Vue 3 的核心庫經過精簡，相比於 Vue 2 有顯著的減少，這有助於加快載入速度，提高效能。

• Bundle 體積縮小：Vue 3 核心約 20kb+，Vue 2 核心約 30kb+； 減少約 30%。
• 渲染性能提升：虛擬 DOM 與編譯器更優化。
• Tree-shaking：只打包用到的 API

Fragment 支援

支援多根節點的元件，讓元件可以返回多個根元素，而不需要包裹在一個單一的父元素中，從而使結構更加靈活。

• Vue 2：一個元件只能有 單一根節點。
• Vue 3：支援 Fragments（多根節點），更靈活。

Vue 2：必須有一個父節點包住

<template>
  <div>
    <h1>標題</h1>
    <p>內容</p>
  </div>
</template>

Vue 3：支援多根節點，更自然

<template>
  <h1>標題</h1>
  <p>內容</p>
</template>

Teleport

Teleport 是一個新元件，允許開發者將內容移動到 DOM 的另一個部分，方便處理模態框、提示等情況，移動就像以下的示意圖一樣

父組件 (被限制區域)
     │
     ▼
Teleport → body

<template>
  <teleport to="body">
    <div class="modal">我是彈窗</div>
  </teleport>
</template>

Suspense

Vue 3 提供 <Suspense>，專門處理「資料還在載入」的情境，這不但豐富了使用者的體驗，配合 Promise 來做更複雜的載入流程控制。

• 例如：等待 API 資料 → 顯示 loading → 完成後顯示內容。

API 請求中 → 顯示 fallback (loading)
完成後 → 顯示 default (真正內容)

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>載入中...</div>
    </template>
  </Suspense>
</template>

新特性和 API

引入一些新的內建指令和 API，例如 v-model 的改進，讓雙向繫結更加靈活，和新加入的 watchEffect 函式，這些特性和改進使得 Vue 3 成為一個更強大、更靈活的前端框架，提升了開發體驗並使得構建大型應用變得更加高效。

當然，這些內容後面都會再更詳細說明底層邏輯和對 Composition API 的革新有哪些優勢，一起期待吧！

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'

const message = ref<string>('Hello Vue 3.6')

watchEffect(() => {
  console.log('message 改變:', message.value)
})
</script>

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>