13 張圖淺談 Vue 核心概念

淺談 DOM 到 Virtual DOM 到 render functions，然後是 Vue 的三個核心模塊，最後通過一個簡單的例子來了解 Vue 響應式原理。

DOM

簡而言之：DOM 是瀏覽器用於更改屏幕顯示內容的 API。

如果我們將 HTML 加載到瀏覽器中，瀏覽器會創建這些 DOM 結點以樹結構顯示我們的網頁：

<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <h1>A heading</h1>
  </body>
</html>

我們可以用 JavaScript 來操作這一系列映射成的 DOM 結點：

let item = document.getElementsByTagName("h1")[0];
item.textContent = "New Heading";

DOM 樹可以有成百上千個結點，像 Vue 這樣的框架就是用來幫我們避免大量重複繁雜的 JS 調用。

但是查找和更新數千個 DOM Nodes 顯然會讓瀏覽器的渲染速度變慢，於是 Virtual DOM 出現了。

Virtual DOM & Render function

Virtual DOM 是一種用 JavaScript 對象來表示 DOM 的方式。

例如一個 div 就可以用一個 JS 對象來表示，而 Vue 可以獲取這個 Virtual Node 並將其 mount(掛載) 到 DOM 上來更新我們在瀏覽器中看到的內容。

其實中間還有一個步驟，Vue 會根據我們的 HTML 模板創建一個 render function 用來返回 VNode：

當組件更新的時候，渲染函數會重新運行並創建一個新的虛擬節點，Vue 將新的結點和舊的結點進行比較後在網頁上更新，diff 算法算是整個虛擬 DOM 中最關鍵的部分，但我不瞭解就不說了：

由 Vitrual DOM 到 Actual DOM 可以看成建築藍圖到實際建築的映射關係。

假如我想在建築的某層樓裏增加一些傢俱並改動一下佈局，有兩種辦法：

  1. 拆除整層樓然後重建（too stupid）。

  2. 創建新的藍圖與舊圖進行對比，然後以最小代價更新。

方式 2 就是 Virtual DOM 的工作方式，並且 Vue3 在更新方面變得更加高效。

3 core modules

①、Reactivity Module

允許我們創建可以觀察變化的 JS 響應式對象，當這些對象的代碼運行的時候，它們會被跟蹤以便發生數據變化時改變運行狀態。

②、Compliler Module

獲取 HTML 模板將它們編譯成render function。

③、Renderer Module

包含將組件渲染到網頁上的三個不同階段的代碼，相信你看了上文後很好理解這三個階段：

一個例子

首先編譯模塊將 HTML 編譯成 render function ：

初始化 reactive object ：

然後進入 renderer module 的第一個階段，調用引用 reactive object 的 render function，觀察這個響應式對象的變化，渲染函數會返回一個 VNode：

然後是掛載階段 mount phase，使用 VNode 調用掛載函數來創建網頁：

如果我們監視的對象發生任何變化，會再次調用渲染函數創建一個新的 VNode，然後一起送到 patch function 根據需要更新網頁：

總結

剛開始學習 Vue 總結的筆記類型的文章，有錯漏可以評論告知。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/WFmv-whZXVVluaxJD6opkA

猜你喜歡