Vue 事件綁定機制 Vue 將事件系統拆分為原生 DOM 事件與自定義組件事件兩套正交實現，前者對接瀏覽器事件循環，後者基於發佈–訂閲模型。本文以 v-on（縮寫 @）為線索，結合運行時源碼路徑，給出端到端的實現剖析。 一、架構概覽 Vue 的事件綁定分為兩條主線： 原生事件綁定 通過 @click 或 v-on:click 直接作用於普通 D
深入 Vue 的 nextTick 在初學 Vue 時，我們經常會遇到這樣的困惑：數據明明已經改了，可頁面卻沒立刻變化；或者手動去獲取更新後的 DOM，結果拿到的是舊值。這時候，Vue 官方會推薦我們使用 this.$nextTick()。它到底做了什麼？為什麼“等一下”就能解決問題？本文嘗試用通俗的語言把它的作用和實現原理講清楚。 一、nextTick 的作用 Vue 的響
深入理解 Vue Router 在前端單頁應用（SPA）中，路由是連接用户操作與頁面展示的核心橋樑。Vue Router 作為 Vue 官方的路由管理器，提供了豐富的功能和靈活的配置。本文將圍繞“路由模式”、“router 與 route 的區別”、“導航守衞的種類”以及“完整的導航解析流程”四個方面，帶你深入理解 Vue Router 的工作機制。 一、路由模式：hash 與
Vue嵌套路由 在單頁應用裏，“頁面”不再是整屏刷新，而是由路由驅動的組件樹。當業務複雜到「用户中心 → 個人資料 / 收貨地址 / 賬號安全 / 好友列表」這種層級時，嵌套路由（Nested Routes）是唯一能把深度與可維護性同時保留下來的方案。 一、嵌套路由到底在解決什麼問題 想象一個用户中心： /user 用户中心外殼（Layou
Vue腳手架模式與環境變量 在真實項目裏，「如果每次切換環境都手動改代碼，不僅低效，還極易把測試地址帶到線上。Vue CLI 把「模式 + 環境變量」做成了一套約定大於配置的體系，只要理解規則，就能讓同一份源碼在任意環境自動作出正確的行為。 一、模式（mode） Vue CLI 把「運行命令」抽象成三種默認模式： development：對應 vue-cli
前端虛擬長列表 當一次性渲染十萬條 DOM 節點時，瀏覽器會瞬間陷入「卡頓—白屏—崩潰」三連擊。虛擬長列表（Virtual Scroller）把「按需渲染」做到極致：只繪製可見區域並加少量緩衝，讓巨量數據在低端設備也能保持 60 FPS。 一、問題本質：渲染成本與滾動成本的矛盾 渲染成本等於節點數量乘以單個節點複雜度，滾動成本等於佈局重排乘以樣式重繪。瀏覽器單幀預算約 16
Vue 2深入 keep-alive keep-alive 是 Vue 2 運行時裏最常被提及卻最少被深究的內置組件。它看上去只是“把頁面緩存起來”，背後卻涉及實例生命週期劫持、LRU 緩存策略、VNode 複用以及內存管理。 一、設計動機 單頁應用裏常見的“標籤頁”“麪包屑”“分步表單”等交互模式，都要求用户在多個路由或狀態之間來回切換。默認情況下，每一次切換都會觸發舊組件
