哈囉，我0111

Hello, TABKDVC

回列表

Virtual DOM 到底解決了什麼痛點？Vue 3 響應式原理淺析

從 jQuery 的重災區到 Vue 3 的魔法：Virtual DOM 到底解決了什麼痛點？

如果你有經歷過那個網頁上掛著一包 jquery.min.js 就能打天下的年代，你一定對這種程式碼不陌生：


      

        
        
$('#btn').click(function() {
  $('#app').empty();
  $('#app').append('<div>嗨，我是新來的</div>');
  $('.old-class').removeClass('old-class').addClass('new-class');
});

那時候寫 Code 真的很直覺：「我要改畫面哪裡，我就去抓那個 DOM 節點，然後把它換掉。」

但當網頁從簡單的「展示型網站」變成複雜的「Web App」（像是你的專案管理後台或是遊戲化的習慣追蹤器）時，這種直接手動操作 DOM 的寫法，簡直就是效能與維護性的災難。

今天我們就來聊聊，為什麼直接操作 DOM 會慢？而 Vue 3 又是怎麼用 Virtual DOM (虛擬 DOM) 把我們從這個泥淖中救出來的。

🐢 為什麼直接操作真實 DOM 會這麼慢？

很多人以為 DOM 只是個簡單的 HTML 標籤，但其實在瀏覽器的底層，一個真實的 DOM 節點是非常龐大且複雜的物件。

你可以打開瀏覽器的 Console，隨便抓一個 div 印出來看看（例如：


      

        
        
console.dir(document.createElement('div'))

你會發現它身上掛載了成百上千個屬性和方法（各種事件、樣式、位置資訊等）。

當你頻繁地用 JavaScript 去修改這些真實 DOM 時，瀏覽器會崩潰，因為它必須執行以下吃重的動作：

  1. 重排 (Reflow)：重新計算畫面上所有元素的位置跟大小。
  2. 重繪 (Repaint)：重新把顏色、陰影等像素畫到螢幕上。

想像一下，如果你有一個包含 1000 筆資料的表格，你只不過是改了其中一筆的狀態，如果是早期的笨寫法，可能會把整個表格的 DOM 刪掉再重新塞入 1000 個新的 DOM。瀏覽器光是重排跟重繪就累死了，畫面當然卡到爆。

🦸‍♂️ Virtual DOM 降臨：先在記憶體裡打個草稿

為了解決這個效能瓶頸，Virtual DOM 誕生了。

什麼是 Virtual DOM？不要被這個酷炫的名字嚇到，它說穿了就只是一個非常輕量的純 JavaScript 物件 (Plain JavaScript Object) 而已。它用來「描述」真實 DOM 應該長什麼樣子。

例如，一個真實的 <div>Hello</div>，在 Virtual DOM 裡面大概長這樣：


      

        
        
const vnode = {
  tag: 'div',
  props: { id: 'app' },
  children: [
    { text: 'Hello' }
  ]
};

因為它只是一個純 JS 物件，所以在記憶體裡面修改它的速度快得不可思議，完全不會觸發瀏覽器的 Reflow 和 Repaint。

🔍 Diff 演算法：找出差異，精準打擊

有了 Virtual DOM 這個輕量的「草稿」後，Vue 的運作流程就變成這樣：

  1. 初次渲染： 根據你的 Vue Template，編譯出一棵 Virtual DOM 樹，然後一次性地把它變成真實 DOM 畫在畫面上。
  2. 資料更新： 當你改了 Vue 裡面的資料（例如 ref 的值變了），Vue 會在記憶體裡產生一棵**「全新的 Virtual DOM 樹」**。
  3. Diff 演算法對比 (找出不同)： Vue 會拿出「舊的樹」跟「新的樹」進行比對（這就是大名鼎鼎的 Diff 演算法）。
  4. 局部更新 (Patch)： 經過比對，Vue 發現「喔！原來這 1000 筆資料裡，只有第 42 筆的文字從 ‘A’ 變成 ‘B’ 」。於是，Vue 只會去命令真實 DOM 更改那一個文字節點，其他 999 筆連動都沒動。

透過這種機制，Vue 把「頻繁操作真實 DOM 的昂貴代價」，轉換成了「在記憶體中比對輕量 JS 物件的極低成本」。

💡 偷偷糾正一個常見迷思

很多人會誤以為「Virtual DOM 比原生 JavaScript 操作 DOM 還要快」，其實這句話不完全正確。

如果你是個頂尖的前端大神，寫出了完美無瑕、極致優化的原生 JS 操作，那絕對比框架快。Virtual DOM 真正的偉大之處在於：它保證了你的程式碼在「最差情況下」，依然有著非常優秀的效能下限。 更重要的是，它讓我們工程師的腦袋解脫了。我們再也不用去寫那些繁瑣的 DOM 操作步驟（命令式），只需要專心定義「資料長怎樣，畫面就長怎樣」（宣告式），剩下的髒活累活，全交給 Vue 在底層默默搞定。

這，就是現代前端框架最大的魔法。