成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

虛擬dom比對(duì)原理

Tony_Zby / 1817人閱讀

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

dom對(duì)比步驟

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

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

原js對(duì)象 
{
    "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對(duì)象渲染成dom結(jié)構(gòu)


    
simple virtual dom

    
hello world

    
    
        
  • item #1
    • 
        
  • item #2
    •

3.修改原js對(duì)象

{
    "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.對(duì)比哪些節(jié)點(diǎn)被修改
type 類(lèi)型，0為標(biāo)簽名改變，1為子元素改變（刪除或添加），2為屬性改變，3為內(nèi)容改變
key 對(duì)象第一層中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對(duì)象

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

    
simple virtual dom

    
hello world2

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51817.html

相關(guān)文章

  • 虛擬dom比對(duì)原理

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

    陸斌 評(píng)論0 收藏0

  • 【Vue原理】VNode - 源碼版

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

    layman 評(píng)論0 收藏0

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

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

    fish 評(píng)論0 收藏0

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

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

    30e8336b8229 評(píng)論0 收藏0

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

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

    Pluser 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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