vue3 虚拟dom与diff算法(小满zs vue3 笔记五)

diff算法(虚拟dom会生成两个节点如c1,c2)

图1

vue3 diff算法原码地址:  https://github.com/vuejs/core

1. diff 算法主要是说renderer.ts中patchChildren这段代码逻辑,如下:

 

 2. diff算法排序分为无key时diff算法排序逻辑和有key时diff算法排序逻辑

 2.1 无key时diff算法排序逻辑, 分为三步如下,如图1中无key: 

  * 通过for循环patch重新渲染元素,来替换

  * 删除

      * 新增

 2.2 keydiff算法排序逻辑分为五步如下:

  * 前序算法前面元素与前面元素比较如 isSameVNodeType,如果不一样,跳出循环

    * 尾序算法尾和尾比较,如果不一样,跳出循环

    * 新节点如果多出来就挂载(新增)

 * 旧节点如果多出来就卸载(删除) ,前4点如图1 有key

 * 乱序(涉及最长递增子系列算法),3个点

  *  构建新节点的映射关系

1
2
3
4
5
6
7
例子:       
    key 1 2 3 4 5
 index 0 1 2 3 4
// sort:
   key 5 4 3 2 1
index 0 1 2 3 4
5 -> 0 4 -> 1 3 -> 2 2 -> 3 1 -> 4
1
* 记录新节点在旧节点的位置(newIndexToOldIndexMap方法),如果多余点删除(unmount),如果新节点不包含旧节点也删除,节点出现交叉,做移动标记,求最长递增算法

      * 求最长递增(升序)算法排序(图1 最长递增算法)

最长递增算法: 1. 选默认递增序列如图1 乱序dp 1 1... 2. 比较 10 -> 1 , 9 -> 9比10小 1  ,2 -> 2比9,10小 1, 5 -> 5比9,10,2 比2大,所以1基础上加1 2,3 -> 比同上,比2大 2, 7 -> 比10..5..3比5大(5对应的是2,加1) 3, 101 -> 比10..7都大取最大值加1 4, 18 -> 比10..101 同上 4 3. 对就索引还是0 1 2 3....

代码事例: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <div :key="item" v-for="(item) in Arr">{{ item }}</div>
  </div>
</template>
  
  
  
<script setup lang="ts">
const Arr: Array<string> = ['A', 'B', 'C', 'D']
Arr.splice(2,0,'DDD')
</script>
  
  
<style>
</style>

  

参考文章: https://xiaoman.blog.csdn.net/article/details/122778560?spm=1001.2014.3001.5502

posted @   TheYouth  阅读(141)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示