# max-vue-diff

**Repository Path**: max-lu/max-vue-diff

## Basic Information

- **Project Name**: max-vue-diff
- **Description**: vue使用到的diff算法
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-04
- **Last Updated**: 2022-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# vue-diff

#### 介绍
vue使用到的diff算法

#### 方法说明

mountElement 新建

patch 复用

unmount 卸载

move 移动

#### diff过程和思路
1.左侧复用比较(patch)：左侧按序查找新老vdom，如果节点不能复用，则停止
2.右侧复用比较(patch)：右侧按序查找新老vdom，如果节点不能复用，则停止
3.判断老节点不存在：剩余新节点全部mountElement
4.判断老节点存在
  4.1.新节点不存在:剩余老节点全部unmount
  4.2.新节点存在!!!!：这里就需要处理新老节点数组

**4.2面临一个问题：如何最优的处理。**

```
每一次都需要比较，可能存在重复的move操作（假如100次）将会是非常耗时的
所以需要找到一个稳定的序列，也就是我们所说的最长递增子序列。找到后，保持稳定的序列不动。只操作剩下的节点
比如4.2的情况下
old : c d e
new : e c d h
这样的情况下就是面临的问题：如何操作性能最优。这里显然是保持 c d 不动，move e节点
```

**4.2情况下的处理流程**

```shell
# 声明：下面说的数组都是剩余的还未处理的数组。或者说上面处理完剩余的待处理数组
1.遍历新的vdom数组。生成一个Map（key： index下标）keyToIndexMap 供后面使用。
2.遍历老vdom数组进行unmount、patch操作。同时做一些操作
	2.1.创建newIndexToOldIndexMap数组，并标记下标，如果下标是0，则没有复用，否则是复用了，供后面使用
	2.2.创建moved变量，标记是否存在move移动操作
	2.3.剪枝操作：如果patch的操作数量已经达到新vdom数组的长度，表示已经全部patch了，剩余的全部都是老数组的unmount操作
3.遍历新vdom数组
	3.1.通过newIndexToOldIndexMap检查节点是否可以服用，如果下标对应的是0（上面有说明）。那么直接mountElement
	3.2.判断是否有moved操作，如果有，进行最长递增子序列计算
```