什么是真實(shí)dom

<div class="box">
    <p class="p-tag"> hello, I'm p tag </p>
    <b> I'm strong! </b>
</div>

轉(zhuǎn)化為虛擬dom

var virtualDom = {
    targetName: 'div',
    props: { class: 'box' },
    children: [
        {
            targetName: 'p',
            props: { class: 'p-tag' },
            children: ' hello, I'm p tag '
        },
        {
            targetName: 'b',
            children: ' I'm strong! '
        }
    ]
}

diff算法的目的

找出差異，最小化更新視圖

diff算法的本質(zhì)

找出兩個(gè)js對象的差異

image.png

為什么采用同級比對

為了減少比對次數(shù)

image.png

比對的方法有哪些？

• 首尾指針法，向中間靠攏

來源

https://www.bilibili.com/video/BV1JR4y1R7Ln/?spm_id_from=333.337.search-card.all.click&vd_source=b8b9d6a9f4f8db2b88c22af391fe0e2a