iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

Vue3.6 的革新:深入理解 Composition API 系列

今年暑假,Vue3.6 官宣兩大黑科技:Vapor Mode (無 Virtual DOM 編譯) 與 Alien Signals (高速依賴追蹤)。
這不只是效能飆升,而是顛覆我們理解框架的方式!
本系列讓我們一起拆解 Composition API,實戰 Composable,從語法到底層,全面理解 Vue3.6 的 Composition API,直擊新特性背後的底層邏輯,打造更可維護、可擴展的專案架構。

參賽天數 19 天 | 共 19 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1: Vue 3 簡介 - Vue 的歷史與進展

這一系列文章的核心議題是 「Vue3.6 的革新」 再去深入理解 Composition API,在 Day1,我將從 Vue 的歷史演進切入,帶讀者理解為什麼...

2025-09-08 ‧ 由 kuku 分享
DAY 2

Day 2: Vue 3 的核心特性與改進

在前一篇(Day 1),我們從歷史與演進的角度理解了 Vue 為什麼需要持續更新。 今天,我們聚焦在 Vue 3 的核心特性,這些功能不僅解決了 Vue 2 的...

2025-09-09 ‧ 由 kuku 分享
DAY 3

Day 3: 環境設定 - 使用 Vite 的準備工作建立首個 Vue 3 專案

在 Vue 2 時期,我們大多數人都靠 webpack 來進行打包編譯,但隨著專案變大,編譯速度會越來越慢,等待時間動輒幾分鐘;Vue 3 官方推薦的工具 Vi...

2025-09-10 ‧ 由 kuku 分享
DAY 4

Day 4: Composition API 概述

Composition API 是一組以「函式 + reactive 原語」為核心的 API,它透過 函式 + reactive 原語 的方式,讓使用者用更彈性...

2025-09-11 ‧ 由 kuku 分享
DAY 5

Day 5: 響應式資料 ref 和 reactive

Vue 3.5 基於 Proxy (代理)重新設計了響應式系統,所有在 ref 或 reactive 包裝的資料,一旦改變,就會自動觸發 DOM 更新,保持「資...

2025-09-12 ‧ 由 kuku 分享
DAY 6

Day 6: Proxy 的底層實現

Vue 3.5 的響應式系統是基於 ES6 Proxy ,它讓框架能「攔截物件操作 → 收集依賴 / 觸發更新」,但「Proxy 到底是什麼、怎麼運作」卻很抽象...

2025-09-13 ‧ 由 kuku 分享
DAY 7

Day 7: Vue 3 如何利用 Proxy 實現響應式系統

經過前一天 Proxy 的概念大致上有個雛形,或許我們可以思考一下:為什麼 Vue 3 需要 Proxy 呢? A few minutes later... 其...

2025-09-14 ‧ 由 kuku 分享
DAY 8

Day 8: 使用 computed 與 watch 資料監控與處理

前一篇說明 Vue 3 有 Proxy 管家的大絕「響應式」,但是除了響應式實戰上還會需要處理或是監控,所以第一階段的基礎理解與環境設定聊完後,今天開始我們一起...

2025-09-15 ‧ 由 kuku 分享
DAY 9

Day 9: watchEffect 的介紹

Vue 3 提供的 watchEffect 是一個專門用來處理「副作用 (Side Effect)」的響應式 API。 它可以 自動追蹤依賴,在資料變更時重新執...

2025-09-16 ‧ 由 kuku 分享
DAY 10

Day 10: 單向數據流 props / emit / v-model 的關鍵概念

Vue 元件之間的核心溝通方式有三種: props(父 → 子):父層把資料當作 唯讀 來源傳給子層,子層 不可 直接改 prop(單向數據流)。 emi...

2025-09-17 ‧ 由 kuku 分享