Vue3的diff算法实现页面更新
站长
· 阅读数 30
前言
dom更新
- 更新dom时，先取到旧的vnode
- 执行render，获得新的vnode
- patch方法执行，传入新旧vnode，diff开始
setupRenderEffect方法
const setupRenderEffect = (instance, contanier) => {
effect(() => {
if (!instance.isMounted) {
// 创建dom
const proxy = instance.proxy;
const subTree = instance.subTree = instance.render.call(proxy, proxy);
patch(null, subTree, contanier)
instance.isMounted = true
} else {
// 更新dom
const proxy = instance.proxy;
const prevTree = instance.subTree; // 记录旧的vnode
// 执行render方法，获取到新的vnode
const subTree = instance.subTree = instance.render.call(proxy, proxy);
// patch方法比较新旧vnode，diff开始的地方
patch(prevTree, subTree, contanier)
}
})
}
patch方法
- 新旧的vnode存在，并且vnode标签不同，删除旧的元素，创建新的元素
- 新旧的vnode存在，标签相同，继续processElement方法，下一步的diff
- 旧的不存在，直接创建新的元素
// 判断元素是否相同
const isSameVnode = (vnode1, vnode2) => {
return vnode1.type === vnode2.type && vnode1.key === vnode2.key;
}
// 移除vnode对应的真实dom
const unmount = (vnode) => {
const parent = vnode.el.parentNode
if (parent) {
parent.removeChild(vnode.el);
}
}
const patch = (n1, n2, contanier, ancher = null) => {
// 旧的vnode存在，新
if (n1 && !isSameVnode(n1, n2)) {
// 元素不同，直接删除，下面再创建新的
unmount(n1);
n1 = null;
}
const { shapeFlag, type } = n2;
if (type === TEXT) {
processText(n1, n2, contanier)
} else if (shapeFlag & ShapeFlags.ELEMENT) {
processElement(n1, n2, contanier, ancher)
} else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
processComponent(n1, n2, contanier)
}
}
processElement方法
相同标签的文本可能不同，可以通过patchChildren更新标签文本；
如果相同标签的还有子标签，就是递归的patch过程
- 新旧vnode都存在，再去patchChildren，进一步diff
const processElement = (n1, n2, contanier, ancher) => {
if (n1 == null) {
mountElement(n2, contanier, ancher)
} else {
// 更新元素
patchElement(n1, n2, contanier, ancher);
}
}
const patchElement = (n1, n2, contanier) => {
let el = n2.el = n1.el;
const oldProps = n1.props || {};
const newProps = n2.props || {};
// 省略比对属性...
// 比对儿子
patchChildren(n1, n2, el);
}
patchChildren方法
- 新旧vnode的children是文本，直接文本覆盖
- 新的vnode的children是文本，旧的children是数组，直接文本覆盖
- 新的vnode的children是数组，旧的children是文本，删除文本，新的children挂载
- 新旧vnode的children都是数组，进一步patchKeyChildren方法，diff核心
const patchChildren = (n1, n2, el) => {
const c1 = n1.children;
const c2 = n2.children;
const prevShapeFlage = n1.shapeFlag;
const newShapeFlage = n2.shapeFlag;
if (newShapeFlage & ShapeFlags.TEXT_CHILDREN) {
el.textContent = c2;
} else {
// 新旧都是数组
if (prevShapeFlage & ShapeFlags.ARRAY_CHIDLREN) {
patchKeyChildren(c1, c2, el)
} else { // 旧的是文本
// 删除文本
el.textContent = '';
mountChildren(el, c2)
}
}
}
const mountChildren = (el, children) => {
for (const child of children) {
let n2 = child;
// 不是vnode生成vnode，具体实现参考上一篇文章
if (!child._v_isVnode) {
n2 = createVnode(TEXT, null, child)
}
patch(null, n2, el);
}
}
patchKeyChildren方法
新旧vnode的children都是数组时，分三种方式进行逐步diff比较，分别是1.新旧子vnode从前往后开始比较；2.新旧子vnode从后往前开始比较；3.剩余的新旧子vnode点建立索引，删除旧的，增加新的，新旧都存在，通过最长递增子序列，计算出做少移动dom的步骤
从前往后比较
新旧childVnode相同，继续递归patch；新旧childVnode不同，跳出循环
// c1,c2对应的旧children和新的children
let i = 0;
let e1 = c1.length - 1;
let e2 = c2.length - 1;
while (i <= e1 && i <= e2) {
const n1 = c1[i];
const n2 = c2[i];
if (isSameVnode(n1, n2)) {
patch(n1, n2, el)
} else {
break
}
i++;
}
从后往前比较
新旧childVnode相同，继续递归patch；新旧childVnode不同，跳出循环
// c1,c2对应的旧children和新的children
while (i <= e1 && i <= e2) {
const n1 = c1[e1];
const n2 = c2[e2];
if (isSameVnode(n1, n2)) {
patch(n1, n2, el)
} else {
break
}
e1--;
e2--;
}
删除不存在，增加新的vnode
根据从前往后的比较或者从后往前的vnode比较，删除多余的vnode，新增不存在的vnode
新增
新的比旧的多，新增，i > e1
删除
新的比旧的少
// 旧的子vnode比新的子vnode少
if (i > e1) {
const nextProps = e2 + 1;
// 前追加
const ancher = nextProps < c2.length ? c2[nextProps].el : null;
while (i <= e2) {
patch(null, c2[i++], el, ancher)
}
} else if (i > e2) {
// 旧的比新的多
while (i <= e1) {
unmount(c1[i++])
}
}
首尾不相等，建立索引
let s1 = i;
let s2 = i;
const toBePathced = e2 - s2 + 1; // 乱序的个数
const newIndexToPatchMap = Array(toBePathced).fill(0);
// 建立起新的vnode的key和索引
const keyIndexMap = new Map();
for (let i = s2; i <= e2; i++) {
const childVnode = c2[i];
keyIndexMap.set(childVnode.key, i);
}
// 处理旧的dom列表
for (let i = s1; i <= e1; i++) {
const oldChildVnode = c1[i];
let newIndex = keyIndexMap.get(oldChildVnode.key);
// 删除不存在元素
if (newIndex === undefined) {
unmount(oldChildVnode)
} else {
// 新旧关系
newIndexToPatchMap[newIndex - s2] = i + 1;
patch(oldChildVnode, c2[newIndex], el)
}
}
const increasingNewIndexSequence = getSequence(newIndexToPatchMap);
let j = increasingNewIndexSequence.length - 1;
// 移动节点，添加新增的元素,从后往前开始
for (let i = toBePathced - 1; i >= 0; i--) {
let curruentIndex = i + s2; // 新的索引
let child = c2[curruentIndex]; // 新的vnode
// 新元素后一个位置作为参考
let ancher = curruentIndex + 1 < c2.length ? c2[curruentIndex + 1].el : null
if (newIndexToPatchMap[i] === 0) {
// 新增元素
patch(null, child, el, ancher)
} else {
// 元素位置调整
if (i !== increasingNewIndexSequence[j]) {
el.insertBefore(child.el, ancher)
} else {
j--;
}
}
}
完整patchKeyChildren代码
// 儿子都是数组
const patchKeyChildren = (c1, c2, el) => {
let i = 0;
let e1 = c1.length - 1;
let e2 = c2.length - 1;
while (i <= e1 && i <= e2) {
const n1 = c1[i];
const n2 = c2[i];
if (isSameVnode(n1, n2)) {
patch(n1, n2, el)
} else {
break
}
i++;
}
while (i <= e1 && i <= e2) {
const n1 = c1[e1];
const n2 = c2[e2];
if (isSameVnode(n1, n2)) {
patch(n1, n2, el)
} else {
break
}
e1--;
e2--;
}
// 旧少，新多
if (i > e1) {
const nextProps = e2 + 1;
// 追加
const ancher = nextProps < c2.length ? c2[nextProps].el : null;
while (i <= e2) {
patch(null, c2[i++], el, ancher)
}
} else if (i > e2) {
// 旧的比新的多
while (i <= e1) {
unmount(c1[i++])
}
} else {
let s1 = i;
let s2 = i;
const toBePathced = e2 - s2 + 1; // 乱序的个数
const newIndexToPatchMap = Array(toBePathced).fill(0);
// key记录的新元素的索引
const keyIndexMap = new Map();
for (let i = s2; i <= e2; i++) {
const childVnode = c2[i];
keyIndexMap.set(childVnode.key, i);
}
// 处理旧的dom列表
for (let i = s1; i <= e1; i++) {
const oldChildVnode = c1[i];
let newIndex = keyIndexMap.get(oldChildVnode.key);
// 删除不存在元素
if (newIndex === undefined) {
unmount(oldChildVnode)
} else {
// 新旧关系
newIndexToPatchMap[newIndex - s2] = i + 1;
patch(oldChildVnode, c2[newIndex], el)
}
}
const increasingNewIndexSequence = getSequence(newIndexToPatchMap);
let j = increasingNewIndexSequence.length - 1;
// 移动节点，添加新增的元素,从后往前开始
for (let i = toBePathced - 1; i >= 0; i--) {
let curruentIndex = i + s2; // 新的索引
let child = c2[curruentIndex]; // 新的vnode
// 新元素后一个位置作为参考
let ancher = curruentIndex + 1 < c2.length ? c2[curruentIndex + 1].el : null
if (newIndexToPatchMap[i] === 0) {
// 新增元素
patch(null, child, el, ancher)
} else {
// 元素位置调整
if (i !== increasingNewIndexSequence[j]) {
el.insertBefore(child.el, ancher)
} else {
j--;
}
}
}
}
}
// 最大递增子序列
const getSequence = (arr) => {
const p = [] // 修正结果的数组
const result = [0];
const len = arr.length;
let i, j, start, end, mid;
for (i = 0; i < len; i++) {
const arrI = arr[i]; // 第一个元素的索引
if (arrI !== 0) {
j = result[result.length - 1];
if (arr[j] < arrI) {
p[i] = j; // push时，最后一个元素是前一项
result.push(i)
continue
}
// 二分法
start = 0
end = result.length - 1
while (start < end) {
mid = start
if (arr[mid] < arrI) {
start = mid + 1
} else {
end = mid;
}
}
// 替换result的第start个元素，它的值可能大于现有值
if (arrI < arr[result[start]]) {
if (start > 0) {
p[i] = result[start - 1]
}
result[start] = i;
}
}
}
// 通过数组p，修正最长递增子序列对应的值
start = result.length
end = result[start - 1]
while (start-- > 0) {
result[start] = end
end = p[end];
}
return result
}
最后
终于完成了vue3的diff的简单实现，更多细节还是需要大家阅读源码，不过对应Vue3面试，还是会有点作用。感兴趣的朋友还可以阅读前面2遍文章，对Vue3有个全面了解。