Vue

公司舊系統是 Vue 2，新功能想用 React，遷移又不能一刀切——這個局面在中大型前端團隊裡比想像中常見。Module Federation 最初是 Webpack 5 的功能，後來 @originjs/vite-plugin-federation 把這套機制帶進 Vite 生態，讓跨框架整合在開發體驗上變得可接受。 這篇文章拆解它的原理、給出可實際跑起來的設定，並點出幾個抄網路範例會踩到的坑。 微前端在解決什麼問題一個大型電商平台，商品展示、購物車、會員中心分屬不同團隊。傳統做法是把所有功能打包成單一應用程式，結果： 購物車改一行，整站要重新部署 商品團隊想升 Vue 3，但購物車還繫在 Vue 2 的 API 上 測試牽一髮動全身，沒人敢在上線前改超過三個檔案 微前端把這個大應用拆成多個獨立部署的模組，每個模組有自己的建置流程、自己的技術棧，只在瀏覽器端組合成完整的畫面。 Module Federation 的核心機制Module Federation 讓不同應用程式在執行時動態分享程式碼，不是在建置時打包在一起。 架構裡有兩個角色： Host（主應用程式）：載入並整...

專案用 httpVueLoader 在瀏覽器直接載入 .vue 檔，沒有 webpack、沒有建置步驟，改完存檔重新整理就看得到結果。方便是方便，但我很快撞到一個惱人的狀況：明明改了 SurveyPit.vue，按 F5 畫面還是舊的，連改了三次都一樣。 第一個念頭是去包 keep-alive，結果越包越糟。後來才弄懂，「快取」這個詞在 Vue 裡指兩種完全不同的東西，方向搞錯就會像我那樣白忙。所以先把這兩件事拆開講。 兩種「快取」 瀏覽器檔案快取（這篇要解的）：瀏覽器為了省流量，會把抓過的 .vue、.js 暫存起來。你改了檔案、重新整理，瀏覽器拿出暫存的舊檔，於是看到舊內容。這是 HTTP 層的事。 元件實例快取：keep-alive 在做的事。它把元件實例留在記憶體裡，切走再切回來時不重建，保留表單輸入跟捲動位置。這是記憶體層的狀態保留，跟「檔案有沒有更新」沒關係。 把這兩者搞混的代價很實際。我當初想解「改完 .vue 不更新」卻跑去包 keep-alive，不但沒效，反而把舊實例牢牢釘在記憶體裡，新內容更難冒出來。 問題情境當時專案有這幾個用 httpVueLoader...

引言Vue 應用規模一大，狀態管理就會開始讓人頭痛。Pinia 是 Vue 官方推薦的狀態管理函式庫，設計目標是型別安全、直觀，且不需要 Vuex 那套繁瑣的 mutation 流程。本文涵蓋 Pinia 的核心概念、進階特性與常見實踐，從安裝到插件系統都會走一遍。 什麼是Pinia?Pinia 是新一代的 Vue 狀態管理函式庫，定位上取代 Vuex。由 Vue 核心團隊成員 Eduardo San Martin Morote 建立，在 Vue 3 中成為官方推薦的狀態管理方案。 Pinia的主要特性: 直觀且簡潔的 API 完整的 TypeScript 支援 支援 Vue 2 和 Vue 3（Pinia v2；v3 起僅支援 Vue 3） 極小的套件大小 支援多個 Store 支援熱模組替換（HMR） 支援 Vue DevTools 插件系統可擴充 安裝和設置1npm install pinia 在 Vue 應用中引入 Pinia： 123456789import { createApp } from 'vue'import
...

Vue.js 的響應式系統一直是框架的核心。從 Vue 2 到 Vue 3，底層從 Object.defineProperty 切換到 Proxy，不是換個 API 這麼簡單——兩種機制的攔截粒度根本不同，直接決定了哪些操作能被追蹤、哪些不能。 Vue 2：Object.defineProperty 時代實作方式Vue 2 在初始化元件時遞迴遍歷整個物件，對每個屬性呼叫 Object.defineProperty，掛上 getter 和 setter： 1234567891011121314function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { get() { // 收集依賴（目前正在執行的 watcher） dep.depend() return val }, set(newVal) { if (newVal === val) return val = newVal ...