這一系列文章的核心議題是 「Vue3.6 的革新」 再去深入理解 Composition API，在 Day1，我將從 Vue 的歷史演進切入，帶讀者理解為什麼 Vue 需要不斷更新，以及 Vue 3.6 的全新特性（Vapor Mode / Alien Signals）對開發者的意義。

Vue 發展時間軸

vuejs.org
https://vuejs.org/guide/introduction.html

下圖是依據 Vue.js 官網整理出來的發展時間軸，透過時間軸能夠更直觀感受到 Vue 是如何回應時代需求：從「易學」到「高效能」，從「Options API」到「Composition API」，最後走向「無 VDOM + Signals」的新時代。

Vue 2.x — Ghost in the Shell (2016–2023)

• 2016 年 9 月

  發布 Vue 2.0 (代號 Ghost in the Shell)，帶來重大升級：

  • Virtual DOM（虛擬 DOM），大幅提升渲染效能。

    虛擬 DOM 是什麼？(Virtual DOM)
    https://www.thisweb.dev/post/what-is-virtual-dom

  • 伺服器端渲染 (SSR) 支援。

  • 更完善的組件系統。

  • 生態系逐步形成（Vue Router、Vuex）。

• 2016–2021

  Vue 2 成為主流框架之一，與 React、Angular 並列三大框架。

• 2022 年 2 月 7 日

  Vue 3 成為 官方預設版本，但 Vue 2 仍有 LTS 支援。

• 2023 年 12 月 31 日

  Vue 2 正式進入 EOL（終止維護），僅剩社群提供有限支持。

Vue 3.x — 現代化進展

Vue 3 的研發從 2018 年開始，2020 年 9 月 18 日正式發布 Vue 3.0 (One Piece)；核心理念是效能、TypeScript 友好、組件邏輯更清晰。

以下是 Vue 3 的主要里程碑：

• Vue 3.0 One Piece (2020/09)
  • Composition API：讓邏輯復用更清晰，TypeScript 更易用。
  • 全新 Proxy-based Reactivity，效能更好。
  • 更小體積（Tree-shaking）。
• Vue 3.2 (2021/08)
  • 新增 <script setup> 語法，讓開發體驗更簡潔。
  • v-memo、v-is 指令，效能與靈活度提升。
  • Web Components 支援。
• Vue 3.3 (2023/05)
  • 更佳的 TypeScript 支援。
  • defineOptions、defineSlots 等語法糖。
• Vue 3.4 (2023/12)
  • 更快的編譯器 (parser 效能 2 倍)。
  • defineModel 穩定化，支援更直覺的雙向綁定。
  • hydration mismatch 改善（SSR 更穩定）。
• Vue 3.5 (2024/06)
  • 響應式系統再優化：記憶體使用顯著下降。
  • Reactive props 解構穩定。
  • 整體效能再次提升。
• Vue 3.6 (2025/07 Alpha 版本)
  • Alien Signals：全新響應式核心重構。
    • 引入 Alien Signals 架構，提升 reactivity 效能，包括更快的依賴追踪、降低記憶體消耗、優化 GC 等。
  • Vapor Mode：無 Virtual DOM，直接操作 DOM，效能突破。
    • 模板編譯成直接操作原生 DOM 的程式碼，省略傳統的 VNode diff 過程。
    • 據測試數據顯示：首屏渲染速度提升倍數；高頻更新效率大幅提升；bundle 體積顯著縮小；單日誌載入數十萬個元件效率極高。
  • DX 提升： 強化 defineModel、事件型別推導、自訂指令生命周期等。
    • 雖官方尚待發布完整 Release Notes，但已有博客整理指出新增如 defineModel()、多參數 v-model 支援、defineOptions() 宏、增強的事件類型推導、自訂指令生命周期等實用開發功能。
  • 正式版預期 Q3–Q4 釋出。

Vue 3.6 Vapor Mode 與傳統 VDOM 對比

走過演化進入 Vue 3.6 新時代前，我們先一起看看 Vapor Mode 與傳統 VDOM 有什麼不同呢？為什麼尤大 (Evan You) 要做這樣的改變呢？

傳統 Virtual DOM 流程

資料更新 → 建立 VNode → Diff 演算法比對 → Patch → 真實 DOM 更新

Vapor Mode 流程

資料更新 → 直接操作真實 DOM（跳過 VNode 建立與 Diff）

Vapor Mode 特性與價值

1. 跳過 Virtual DOM：編譯器將模板直接轉換為真實 DOM 操作。
2. 細粒度更新：透過 Proxy-based reactivity，僅更新受影響節點。
3. 性能與體積優勢：
   • 首屏 JS 大小：22.8 KB → 7.9 KB（縮減 65%）
   • 更新性能提升約 40%，記憶體峰值降低 42%

實際程式碼示範

<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>

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

編譯後，將生成貼近「手寫 DOM 操作」的程式碼，而非傳統 VNode。

VDOM vs Vapor Mode 對照表

Vue 3.6 帶來的啟示

1. 從易用到高效：Vue 不再只是「好上手」的框架，而是進軍 極致效能 與 大型應用場景。
2. 開發者習慣調整：Vapor Mode 僅支援 Composition API，推動社群全面轉向現代化開發方式。
3. 未來導向：Alien Signals 將進一步重塑響應式核心，讓 Vue 與 React Signals、SolidJS 在概念上接軌。

Vue 生態的配套進展

• Vue Router 4：專為 Vue 3 設計的路由系統。
• Pinia：Vue 3 官方推薦的狀態管理工具，取代 Vuex。
• Vite：由尤雨溪開發的次世代前端建構工具，已成 Vue 官方推薦。
  

參考資料

Vue 3.6 更新内容總結
https://www.nsmao.com/announcement/67

Vue 3.6 and Vapor Mode: This is Another Level
https://jose-gutierrez.com/en/articles/vue-36-and-vapor-mode-this-is-another-level