千鋒逆戰班，rayson.jin學習打卡！
今天給大家介紹一下虛擬dom和diff演算法。
1.它是乙個object物件模型，用來模擬真實dom節點的結構
（虛擬dom其實是裡面記憶體型物件（js記憶體物件） 屬於記憶體資料 真實dom的一層對映）
2.提供一種方便的工具，使得開發效率得到保證
3.保證最小化的dom操作，使得執行效率得到保證
1.獲取資料
2.建立vdom
3.將vdom渲染成真實dom
4.資料更改了
5.使用diff演算法比對兩次vdom，將之前的虛擬dom樹結合新的資料生成一顆新的虛擬dom樹
6.根據key將patch物件渲染到頁面中改變的結構上，而其他沒有改變的地方是不做任何修改的（ 虛擬dom的惰性原則 ）
//1.獲取資料
var data =
//2.記憶體中生成一顆虛擬dom樹，建立vdom
var vdom =
, children:[,
}]}//3.將記憶體中的虛擬dom樹初始化渲染成真實dom樹
//4.更改資料
data.arr.
push
("111"
) data.arr.
push
("222"
)//5.使用diff演算法比對兩次vdom，將之前的虛擬dom樹結合新的資料生成一顆新的虛擬dom樹
var newdom =
, children:[,
,children:[,
]}]}
//6.將對比出來的差異的部分進行重新真實dom結構的渲染
'box'
>
for=
'(item,index) in list'
:key =
'item.id'
>
}<
/p>
'changestyle'
>修改<
/button>
'remove(index)'
>刪除<
/button>
<
/div>
<
/li>
<
/ul>
<
/div>
//id為
newvue(,
]}, methods:
,remove
(index)}}
)<
/script>
虛擬dom diff演算法
通過render函式解析jsx，將其轉換成 vdom結構var vdom content 初次渲染 vdom vdom渲染成 真實dom render函式 資料更改了data.name 駿哥 vdom content 使用diff演算法比對兩次vdom,生成patch物件diff演算法是比較兩個檔案...
虛擬dom diff演算法
虛擬dom是什麼？需求 有乙個變數 count 的初始值時 0，經過一系列運算，得到10001，然後將結果寫入box中 var box document.queryselector box 我們可能會這麼寫 var count 0 console.time a for var i 0 i 10001...
虛擬Dom diff演算法
1.虛擬dom樹的遍歷 2.parent節點下的children的比較 3.diff完成之後對真實3.dom的操作時機 虛擬dom的遍歷 虛擬dom說到底只是一顆樹形結構，對於樹的遍歷我們知道有深度遍歷和廣度遍歷 一 指代不同 1 深度優先遍歷 是對每乙個可能的分支路徑深入到不能再深入為止，而且每個...