国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

虛擬dom比對原理

Tony_Zby / 1792人閱讀

摘要：對比步驟用對象來表達(dá)結(jié)構(gòu)標(biāo)簽名元素屬性唯一標(biāo)識子元素格式和父元素一樣有幾個(gè)子元素，用于計(jì)算當(dāng)前元素的索引，處于整個(gè)中的第幾個(gè)，方便操作原對象原對象渲染成結(jié)構(gòu)修改原對象對比哪些節(jié)點(diǎn)被修改類型，為標(biāo)簽名改變，為子元素改變刪除或添加，為屬性改變，

dom對比步驟

1.用js對象來表達(dá)dom結(jié)構(gòu)

tagName 標(biāo)簽名
props 元素屬性
key 唯一標(biāo)識
children 子元素,格式和父元素一樣
count 有幾個(gè)子元素，用于計(jì)算當(dāng)前元素的索引，處于整個(gè)dom中的第幾個(gè)，方便dom操作

原js對象 
{
    "tagName": "div",
    "props": {
        "id": "container"
    },
    "children": [
        {
            "tagName": "h1",
            "props": {
                "style": "color:red"
            },
            "children": [
                "simple virtual dom"
            ],
            "count": 1
        },
        {
            "tagName": "p",
            "props": {},
            "children": [
                "hello world"
            ],
            "count": 1
        },
        {
            "tagName": "ul",
            "props": {},
            "children": [
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #1"
                    ],
                    "count": 1
                },
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #2"
                    ],
                    "count": 1
                }
            ],
            "count": 4
        }
    ],
    "count": 9
}

2.原js對象渲染成dom結(jié)構(gòu)


    
simple virtual dom

    
hello world

    
    
        
  • item #1
    • 
        
  • item #2
    •

3.修改原js對象

{
    "tagName": "div",
    "props": {
        "id": "container2"
    },
    "children": [
        {
            "tagName": "h5",
            "props": {
                "style": "color:red"
            },
            "children": [
                "simple virtual dom"
            ],
            "count": 1
        },
        {
            "tagName": "p",
            "props": {},
            "children": [
                "hello world2"
            ],
            "count": 1
        },
        {
            "tagName": "ul",
            "props": {},
            "children": [
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #1"
                    ],
                    "count": 1
                },
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #2"
                    ],
                    "count": 1
                },
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #3"
                    ],
                    "count": 1
                }
            ],
            "count": 6
        }
    ],
    "count": 11
}

4.對比哪些節(jié)點(diǎn)被修改
type 類型，0為標(biāo)簽名改變，1為子元素改變（刪除或添加），2為屬性改變，3為內(nèi)容改變
key 對象第一層中key值表示索引，原dom中第幾個(gè)元素發(fā)生變化

{
    "0": [
        {
            "type": 2,
            "props": {
                "id": "container2"
            }
        }
    ],
    "1": [
        {
            "type": 0,
            "node": {
                "tagName": "h5",
                "props": {
                    "style": "color:red"
                },
                "children": [
                    "simple virtual dom"
                ],
                "count": 1
            }
        }
    ],
    "4": [
        {
            "type": 3,
            "content": "hello world2"
        }
    ],
    "5": [
        {
            "type": 1,
            "moves": [
                {
                    "index": 2,
                    "item": {
                        "tagName": "li",
                        "props": {},
                        "children": [
                            "item #3"
                        ],
                        "count": 1
                    },
                    "type": 1
                }
            ]
        }
    ]
}

5.渲染修改后的js對象

a.標(biāo)簽名改變，直接重新渲染整個(gè)元素，包括元素下的子元素
b.子元素改變，該刪除的刪除，該添加的添加（針對列表框架有一套自己的計(jì)算方法，可以自行百度去研究）
c.屬性改變，操作對應(yīng)元素的屬性
d.內(nèi)容改變，操作對應(yīng)元素的內(nèi)容

    
simple virtual dom

    
hello world2

    
    
        
  • item #1
    • 
        
  • item #2
    • 
        
  • item #3
    •

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51817.html

相關(guān)文章

  • 虛擬dom比對原理

    摘要：對比步驟用對象來表達(dá)結(jié)構(gòu)標(biāo)簽名元素屬性唯一標(biāo)識子元素格式和父元素一樣有幾個(gè)子元素，用于計(jì)算當(dāng)前元素的索引，處于整個(gè)中的第幾個(gè)，方便操作原對象原對象渲染成結(jié)構(gòu)修改原對象對比哪些節(jié)點(diǎn)被修改類型，為標(biāo)簽名改變，為子元素改變刪除或添加，為屬性改變， dom對比步驟 1.用js對象來表達(dá)dom結(jié)構(gòu) tagName 標(biāo)簽名props 元素屬性key 唯一標(biāo)識children 子元素,格式和父元素一...

    陸斌 評論0 收藏0

  • 【Vue原理】VNode - 源碼版

    摘要：表示虛擬節(jié)點(diǎn)，為什么叫虛擬節(jié)點(diǎn)呢，因?yàn)椴皇钦娴墓?jié)點(diǎn)。因?yàn)槭菍ο螅还苓€是瀏覽器，都可以統(tǒng)一操作，從而獲得了服務(wù)端渲染原生渲染手寫渲染函數(shù)等能力減少操作。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點(diǎn)擊 下面鏈接 或者 拉到 下...

    layman 評論0 收藏0

  • 無痛學(xué)會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

    摘要：它會檢測出最大靜態(tài)子樹就是不需要?jiǎng)討B(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時(shí)候，它就會直接重用完全相同的同時(shí)跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。 新增：哈哈，最近又推出了 vue 的文章，在這里放個(gè)鏈接~手把手教你從零寫一個(gè)簡單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非常火的vue2前端框架的特點(diǎn)和vue2+vuex2+we...

    fish 評論0 收藏0

  • 無痛學(xué)會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

    摘要：它會檢測出最大靜態(tài)子樹就是不需要?jiǎng)討B(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時(shí)候，它就會直接重用完全相同的同時(shí)跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。 新增：哈哈，最近又推出了 vue 的文章，在這里放個(gè)鏈接~手把手教你從零寫一個(gè)簡單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非常火的vue2前端框架的特點(diǎn)和vue2+vuex2+we...

    30e8336b8229 評論0 收藏0

  • 無痛學(xué)會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

    摘要：它會檢測出最大靜態(tài)子樹就是不需要?jiǎng)討B(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時(shí)候，它就會直接重用完全相同的同時(shí)跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。 新增：哈哈，最近又推出了 vue 的文章，在這里放個(gè)鏈接~手把手教你從零寫一個(gè)簡單的 VUE 感謝有人看我扯技術(shù)，這篇文章主要介紹最近非常火的vue2前端框架的特點(diǎn)和vue2+vuex2+we...

    Pluser 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<