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 11

Day 11: 跨元件的 provide / inject

資料傳遞的方法 props / emit / v-model 明顯看到主要是以一層傳遞一層的方法執行,但是如果要多層怎麼辦呢? 這時候就要靠 provide /...

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

Day 12: v-model 的進化

v-model 的進化主要是為瞭解決雙向繫結的靈活性和可擴充套件性問題。 在新的版本中,v-model 不僅僅是用於表單元素的簡單雙向資料繫結,還支援跨元件的資...

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

Day 13: 瞭解 v-model 的實現細節與案例

按照前一天的綁定模式做一個「型表單範例」,直接看到 v-model 底層從「共享 → 包裝 → 轉換」的效果,今天透過更詳細的案例說明,不只知道 v-model...

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

Day 14: 小專案實作:整合已學知識,製作簡單應用

去年鐵人賽我做了一個任務管理系統來練後端,今年決定延續這個作品,挑戰把前兩週學到的 Vue 3 知識整合到一個實際的小專案。這不只是 CRUD,而是希望在一個小...

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

Day 15: Composable,Vue 3.6 的「組裝革命螺絲」

這一系列的第一個重頭戲來啦! Vue 3.6 把底層訊號系統換成 Alien Signals,效能和記憶體占用大幅下降,這意味著:我們在寫 composable...

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

Day 16: 讓組合更快的關鍵 - 寫出真正可拼裝的 composable

昨天我們提到,Vue 3.6 在底層 runtime 針對「多個 composable 的組合」做了效能優化: 透過 EffectScope 與依賴追蹤的改進,...

2025-09-23 ‧ 由 kuku 分享
DAY 17

Day 17: Composable 的「可擴展設計」與 Vue 3.6 新能力

開發的時候總會想怎麼才能改善效能?怎麼才能讓網頁跑得快?但是...真的是這樣嗎? 好多時候,「跑得更快」不如「設計得更好」,畢竟程式碼在未來還是有機會擴充維護,...

2025-09-24 ‧ 由 kuku 分享
DAY 18

Day 18: Effect Scope 與 onScopeDispose - Vue 3.6 的作用域管理術

我們學了如何打造「單一職責、可組合」的 composable,並且讓多個 composable 一起運作時,充分發揮 Vue 3.6 的效能優勢。 但如果我們拆...

2025-09-25 ‧ 由 kuku 分享
DAY 19

Day 19: Vue 3.6 的秘密武器 - Vapor Mode & Alien Signals

Vue 3.6 在開發寫法上沒有落差很大,但是他的底層效能真的是超級黑魔法,今天就讓我們一起探討讓多個 composable 一起跑,依然順暢的底層黑魔法! 在...

2025-09-26 ‧ 由 kuku 分享