【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

凝绝i

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量63

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_50068219/article/details/122079444

版权

虚拟Dom与Diff算法

虚拟Dom：用JS对象的形式，模拟页面Dom嵌套关系
本质：用js对象，模拟Dom元素和嵌套关系
目的：实现页面元素高效刷新

Dom：浏览器中提供的概念；用js对象，表示页面上的元素，并提供操作元素的API

虚拟Dom：是框架中的概念；是开发框架的程序员，手动用JS对象来模拟Dom元素和嵌套关系

<div id="mydiv" title="标题" data-index="0">
    11111
    <p>66</p>
</div>


var div={
    tagName:'div',
    attrs:{
        id:'mydiv',
        title:'标题',
        'data-index':'0'
    },
    childrens:[
        "66",
        {
            tagName:'p',
            attrs:{},
            childrens:[
                "哈哈哈"
            ]
        }
    ]
}

Deff算法：
tree diff：新旧两颗Dom树，逐层对比的过程，当整颗Dom逐层对比完毕，则所有需要被更新的元素，全部能够被找到

component diff：在进行 Tree diff的时候，每一层中，组件级别的对比，如果对比前后则暂时认为组件不需要更新；对比类型不同，需要移除旧组件，创建新组件

element diff：在进行组件对比的同时，如果两个组价类型相同，则进行元素之间的对比

v-for中key的作用：

一层中有很多节点时Diff默认遵循一层一层分别对比的方式，如果想要在一个一堆节点中间插入一个新的值，那么插入位置后面的那个节点变成新的值，后面的值依次更新成原本前一位的值，如果使用key值对每一个节点做出唯一标识，直接找到正确的位置将新增的节点直接插入，:key=“唯一标识”，这个唯一标识可以利用后端返回的id或者列表中的index来进行唯一值的绑定，说白了就是为了更容易的找到插入的位置，更加高效的更新虚拟Dom