虚拟dom比对原理

Tony_Zby 发布于2019-08-01 18:33 / 1784人阅读

摘要：对比步骤用对象来表达结构标签名元素属性唯一标识子元素格式和父元素一样有几个子元素，用于计算当前元素的索引，处于整个中的第几个，方便操作原对象原对象渲染成结构修改原对象对比哪些节点被修改类型，为标签名改变，为子元素改变删除或添加，为属性改变，

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虚拟机原理服务器虚拟化工作原理人证比对数据比对

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51817.html

虚拟dom比对原理

摘要：对比步骤用对象来表达结构标签名元素属性唯一标识子元素格式和父元素一样有几个子元素，用于计算当前元素的索引，处于整个中的第几个，方便操作原对象原对象渲染成结构修改原对象对比哪些节点被修改类型，为标签名改变，为子元素改变删除或添加，为属性改变， dom对比步骤 1.用js对象来表达dom结构 tagName 标签名props 元素属性key 唯一标识children 子元素,格式和父元素一...

陆斌 2019-08-26 11:38 评论0 收藏0
【Vue原理】VNode - 源码版

摘要：表示虚拟节点，为什么叫虚拟节点呢，因为不是真的节点。因为是对象，不管还是浏览器，都可以统一操作，从而获得了服务端渲染原生渲染手写渲染函数等能力减少操作。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下...

layman 2019-08-23 18:32 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和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