虚拟dom和diff算法的简单理解与总结

最新推荐文章于 2023-01-31 19:45:31 发布

前端小金丝

最新推荐文章于 2023-01-31 19:45:31 发布

阅读量305

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/ljb376766764/article/details/126042318

版权

什么是虚拟 dom：

本质上就是一个js的对象用来描述要渲染的结构

因为真实的dom上面的属性和方法太多（可以用dir打印一下）用太多原生的会影响性能和渲染效率

//想要渲染的结构
<template>
  <div id="box">
    <p class="my_p">123</p>
  </div>
</template>

//虚拟dom对象
const dom = {
  type: 'div',
  attributes: [{ id: 'box' }],
  children: {
    type: 'p',
    attributes: [{ class: 'my_p' }],
    text: '123'
  }
}

1.虚拟dom 在初次渲染的时候会先生成一个虚拟dom树

2.根据虚拟dom树渲染真实的dom结构

3.然后数据更新的时候会再生成一个虚拟dom树两个虚拟dom树利用 diff 算法对比

4.对比之后就只吧修改的地方更新到页面

diff算法

主要是用key来生成唯一标识这样在对比的时候就不会造成数据错误，

情况1，元素改变他就会直接吧这个删除然后重新渲染

//旧数据
<div id="box">
    <p class="my_p">123</p>
</div>
 
//新数据
<ul id="box">
    <li class="my_p">123</li>
</ul>

情况2 元素不变，里面的属性变了，就不会删除元素，而是只修改改变的元素

//旧数据
<ul class="active">
  <li v-for="item in list">{{ item }}</li>
</ul>
 
//新数据
<ul class="">
  <li v-for="item in list">{{ item }}</li>
</ul>

情况3 v-for

如果key是唯一的标识，数据改变的地方可以在任意位置都是会只更新改变的地方

如果key用index或者没有key（没有的时候默认也是index）这个时候在最后面添加也是跟上面一样没有影响的，但是当你修改的地方在最前面或者中间的时候修改的地方开始往后都会被判断发生了改变全都重新渲染