虚拟DOM
虚拟DOM（Virtual DOM）是对真实DOM的JS抽象表现，能够描述DOM结构和关系，在合适的时机将虚拟dom转化为真实dom节点。
优点：
- DOM发生变化时，通过新旧虚拟DOM对比可以得到最小的操作量，从而提升性能。
- 跨平台，将虚拟DOM转换为不同运行时实现跨平台。
- Vue的diff算法是基于snabbdom改造过来的，仅在同级的vnode间做diff，最终实现整个DOM树的更新。这样可以大大降低时间复杂度(从O(n3)变成O(n)）。
- 兼容性：还可以加入兼容性代码增强操作的兼容性
// 真实DOM
<div>
<p>Hello World</p>
</div>
// 虚拟DOM
let vnode = {
tag: 'div',
children:[ {tag:'p', text:'Hello World'}]
}
虚拟节点中所包含的属性
// 虚拟节点中所包含的属性
export default class VNode {
tag: string | void; // 标签名
data: VNodeData | void; // 数据
children: ?Array<VNode>; // 子节点数组
text: string | void; // 真实节点所对应的文本
elm: Node | void; // 对应的真实dom
key: string | number | void; // 元素上定义的key
parent: VNode | void; // component placeholder node
isStatic: boolean; // hoisted static node // 是否是静态节点
isComment: boolean; // 是否是注释节点
isCloned: boolean; // is a cloned node?
isOnce: boolean; // is a v-once node? // 是否是v-once的节点
}
diff算法
patch方法
所在文件 patch core\vdom\patch.js
树级别的比较，可能有三种情况：增删改。
- new VNode 不存在就删；
- old VNode 不存在就增；
- 都存在就执行 diff 执行更新
function patch (oldVnode, vnode) {
// 新节点不存存在，删除
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
// 老节点不存在为第一次渲染，新增
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
isInitialPatch = true
// 根据vnode生成新元素
createElm(vnode)
} else {
// 判断是否相同节点
if (sameVnode(oldVnode, vnode)) {
patchVnode(oldVnode, vnode)
} else {
const oEl = oldVnode.el // 当前oldVnode对应的真实元素节点
let parentEle = api.parentNode(oEl) // 获取父节点
createEle(vnode) // 根据Vnode生成新元素
if (parentEle !== null) {
api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
api.removeChild(parentEle, oldVnode.el) // 移除以前的旧元素节点
oldVnode = null
}
}
}
}
// 判断新老节点是否相同
// key节点唯一标识 tag(标签名) isComment(是否为注释节点)
function sameVnode (a, b) {
return (
a.key === b.key && (
(
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)
)
)
)
}
patchVnode方法
比较两个vNode包括三种操作类型：属性更新、文本更新、子节点更新
- 新老节点 均有 children 子节点，则对子节点进行 diff 操作，调用 updateChildren
- 如果 老节点没有子节点而新节点有子节点 ，先清空老节点的文本内容，然后为其新增子节点。
- 新节点没有子节点而老节点有子节点 的时候，则移除该节点的所有子节点。
- 新老节点都无子节点 的时候，只是文本的替换。
function patchVnode (oldVnode, vnode) {
if (oldVnode === vnode) {
return
}
let i
const data = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)
}
// 找到老节点的真实dom, elm
const elm = vnode.elm = oldVnode.elm
// 找到新老节点的孩子节点
const oldCh = oldVnode.children
const ch = vnode.children
// 属性更新
if (isDef(data) && isPatchable(vnode)) {
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
}
// 判断是否是元素， 没有文本则是Element
if (isUndef(vnode.text)) {
// 新老节点都有孩子
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch)
// 比较两个孩子节点差异并更新
updateChildren(elm, oldCh, ch)
} else if (isDef(ch)) { // 只有新节点有孩子
// 老节点有文本 清空文本
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
// 将新节点的孩子节点加入到真实dom上
addVnodes(elm, null, ch, 0, ch.length - 1)
} else if (isDef(oldCh)) {
// 只有老节点有孩子 删除老节点
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) {
// 老节点有文本 清空文本
nodeOps.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) {
// 新老节点都是文本且不同，直接使用新文本替换老文本
nodeOps.setTextContent(elm, vnode.text)
}
}
updateChildren方法
对比新旧children得出最小操作补丁，有四种情况
- 老头结点和新头结点相同，直接patchVnode
- 老尾结点和新尾巴结点相同，直接patchVnode
- 老头结点和新尾结点相同，patchVnode的同时还要把老头结点放到老尾结点后面去
- 老尾结点和新头结点相同，patchVnode的同时将老尾结点放到老头结点前面去
如果以上四种情况都不符合：
则在老的节点队列中寻找循环寻找与新头结点满足sameVnode的节点，然后移到老头结点前面去，新头结点下标向后移一位
也有可能找不到这样的节点，那么就新建一个节点，并且将它放到老节点队列最前面去
最后老节点队列和新节点队列长度可能不一样，就会有一个队列没有遍历完，那么就会有有一下两种情况：
批量增加（老节点遍历完了，还有没遍历的新节点就批量创建增加上去）
批量删除（新节点遍历完了，还有没遍历的老节点就批量删除掉）
function updateChildren (parentElm, oldCh, newCh) {
// 定义两个指针分别指向两个子节点数组的开始
let oldStartIdx = 0
let newStartIdx = 0
// 分别获取新老子节点数组的长度和开始和结束节点
let oldEndIdx = oldCh.length - 1
let oldStartVnode = oldCh[0]
let oldEndVnode = oldCh[oldEndIdx]
let newEndIdx = newCh.length - 1
let newStartVnode = newCh[0]
let newEndVnode = newCh[newEndIdx]
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
// 当新老节点都没有对比完一直循环
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 老节点的开始节点不存在，则直接进行下次循环，下标向后移一位
if (isUndef(oldStartVnode)) {
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
}
// 老节点的结束节点不存在，则直接进行下次循环，下标向前移一位
else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[--oldEndIdx]
}
// 新旧节点相同
else if (sameVnode(oldStartVnode, newStartVnode)) {
// 递归比较两个节点，同时+1
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
}
// 新旧的结束节点相同， 同时-1
else if (sameVnode(oldEndVnode, newEndVnode)) {
patchVnode(oldEndVnode, newEndVnode)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
}
// 老的头节点与新的尾巴节点相同，把老的头节点移动到老的尾巴去，提高相同度
else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
patchVnode(oldStartVnode, newEndVnode)
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
}
// 老的尾节点与新的头节点相同
else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
patchVnode(oldEndVnode, newStartVnode)
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
}
// 4种猜想都没有找到相同的，才被迫进行循环查找
else {
if (isUndef(oldKeyToIdx))
// createKeyToOldIdx会返回一个map key就是老元素的key值是老元素的索引(oldKeyToIdx)
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
// findIdxInOld方法 (查找在老的数组中的索引key)
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
// idxInOld (老的子节点数组中没有这个元素，则新建)
if (isUndef(idxInOld)) { // New element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
vnodeToMove = oldCh[idxInOld]
// 如果找到元素可以复用，则进一步比较
if (sameVnode(vnodeToMove, newStartVnode)) {
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
oldCh[idxInOld] = undefined
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// 只有key相同，但是内容不相同
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
// 移动指针
newStartVnode = newCh[++newStartIdx]
}
}
// 最后收尾，进行整理工作
// 新的子节点数组长度长 添加新增的
if (oldStartIdx > oldEndIdx) {
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx)
} else if (newStartIdx > newEndIdx) {
//老的子节点数组长度长 删除多余的
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
}
}
网友评论