虛擬dom比對原理

陸斌發布于2019-08-26 11:38 / 1398人閱讀

摘要：對比步驟用對象來表達結構標簽名元素屬性唯一標識子元素格式和父元素一樣有幾個子元素，用于計算當前元素的索引，處于整個中的第幾個，方便操作原對象原對象渲染成結構修改原對象對比哪些節點被修改類型，為標簽名改變，為子元素改變刪除或添加，為屬性改變，

dom對比步驟

1.用js對象來表達dom結構

tagName 標簽名
props 元素屬性
key 唯一標識
children 子元素,格式和父元素一樣
count 有幾個子元素，用于計算當前元素的索引，處于整個dom中的第幾個，方便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結構


    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.對比哪些節點被修改
type 類型，0為標簽名改變，1為子元素改變（刪除或添加），2為屬性改變，3為內容改變
key 對象第一層中key值表示索引，原dom中第幾個元素發生變化

{
    "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.標簽名改變，直接重新渲染整個元素，包括元素下的子元素
b.子元素改變，該刪除的刪除，該添加的添加（針對列表框架有一套自己的計算方法，可以自行百度去研究）
c.屬性改變，操作對應元素的屬性
d.內容改變，操作對應元素的內容


    simple virtual dom
    hello world2
    
        item #1
        item #2
        item #3

云服務器 GPU云服務器 java虛擬機原理服務器虛擬化工作原理人證比對數據比對

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107282.html

虛擬dom比對原理

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

Tony_Zby 2019-08-01 18:33 評論0 收藏0
【Vue原理】VNode - 源碼版

摘要：表示虛擬節點，為什么叫虛擬節點呢，因為不是真的節點。因為是對象，不管還是瀏覽器，都可以統一操作，從而獲得了服務端渲染原生渲染手寫渲染函數等能力減少操作。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下...

layman 2019-08-23 18:32 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

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

fish 2019-08-29 11:27 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

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

30e8336b8229 2019-08-22 10:40 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

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

Pluser 2019-08-01 15:52 評論0 收藏0