淺談 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 可以看成建筑藍圖到實際建筑的映射關系，

假如我想在建筑的某層樓里增加一些家具并改動一下布局，有兩種辦法：

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

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

初始化 reactive object ：

然后進入 renderer module 的第一個階段，呼叫參考 reactive object 的 render function，觀察這個回應式物件的變化，渲染函式會回傳一個VNode：

然后是掛載階段 mount phase，使用VNode呼叫掛載函式來創建網頁：

如果我們監視的物件發生任何變化，會再次呼叫渲染函式創建一個新的VNode，然后一起送到 patch function 根據需要更新網頁：

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

參考視頻：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305471.html

標籤：其他