虛擬dom diff演算法

虛擬dom是什麼？

/* 

需求： 有乙個變數 count 的初始值時 0，經過一系列運算，得到10001，然後將結果寫入box中
*/var box = document.
queryselector
('.box'
)// 我們可能會這麼寫
var count =0;
console.
time
('a'
)for
(var i =
0; i <
10001
; i++
) console.
timeend
('a'
)// a字元輸出花費的時間
// 我們肯定會這麼寫
count =
0  console.
time
('b'
)for
(var i =
0; i <
10001
; i++
) box.innerhtml = count 
console.
timeend
('b'
)// 對比以上  a   b   輸出花費的時間

var data =

var vdom =

,     content:
}]}

// var div = document.createelement('div')

// div.classname = 'box'
// var ul = document.createelement('ul')
// var li = document.createelement('li')

="box"

>
}<
/li>
<
/ul>
<
/div>

var vdom =

,     content:
}]}

data.name =

'亮哥'
vdom =
,     content:
}]}

>

for=
" (item,index) in list"
:key =
"item.id"
>
}<
/p>
"changestyle"
> 修改樣式 <
/button>
"remove( index )"
>刪除 <
/button>
<
/div>
<
/li>
<
/ul>
<
/div>
newvue(,
]}, methods:
,remove
( index )}}
)

ackground = 『red』

},remove ( index ) }})

4. diff演算法執行結束之後，返回什麼？

- patch物件
注意： vue是一是mvvm框架，vue高效能的原因之一就是vdom
深化： vue  vdom   vs  react  vdom  有何不一樣？（敬請期待）

虛擬dom diff演算法

通過render函式解析jsx，將其轉換成 vdom結構var vdom content 初次渲染 vdom vdom渲染成 真實dom render函式 資料更改了data.name 駿哥 vdom content 使用diff演算法比對兩次vdom,生成patch物件diff演算法是比較兩個檔案...

虛擬Dom diff演算法

1.虛擬dom樹的遍歷 2.parent節點下的children的比較 3.diff完成之後對真實3.dom的操作時機 虛擬dom的遍歷 虛擬dom說到底只是一顆樹形結構，對於樹的遍歷我們知道有深度遍歷和廣度遍歷 一 指代不同 1 深度優先遍歷 是對每乙個可能的分支路徑深入到不能再深入為止，而且每個...

虛擬dom diff演算法

千鋒逆戰班，rayson.jin學習打卡！今天給大家介紹一下虛擬dom和diff演算法。1.它是乙個object物件模型，用來模擬真實dom節點的結構 虛擬dom其實是裡面記憶體型物件 js記憶體物件 屬於記憶體資料 真實dom的一層對映 2.提供一種方便的工具，使得開發效率得到保證 3.保證最小化...