patch方法的定义
import * as nodeOps from 'web/runtime/node-ops'
import { createPatchFunction } from 'core/vdom/patch'
import baseModules from 'core/vdom/modules/index'
...
const modules = platformModules.concat(baseModules)
export const patch: Function = createPatchFunction({ nodeOps, modules })
nodeOps就是一堆操作节点的方法，modules是对节点属性的创建、更新方法
/* @flow */
...
export function createTextNode (text: string): Text {
return document.createTextNode(text)
}
...
然后vue/src/core/vdom/patch.js的createPatchFunction方法根据传入的backend，返回一个patch方法，这个是根据不同平台操作dom的方法生成的，实现了跨平台
patch的执行入口
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.$el
const prevVnode = vm._vnode
...
if (!prevVnode) {
// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// updates
vm.$el = vm.__patch__(prevVnode, vnode)
}
...
}
组件实例的是初始化还是更新走的是同一个方法，区别就在于该节点是否有Vnode实例，没有就是#app之类的宿主对象，需要生成Vnode
return function patch (oldVnode, vnode, hydrating, removeOnly) {
// 如果新节点没有，但是老节点存在，就会直接删掉老节点
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
let isInitialPatch = false
const insertedVnodeQueue = []
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
// 老节点不存在，就创建一个节点
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
} else {
// 检查是否是真实dom，有nodeType就是真实的
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
// 不是真实dom，再走这里，这里就是diff的入口
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
if (isRealElement) {
...
// either not server-rendered, or hydration failed.
// create an empty node and replace it
// 创建一个空的节点，但我觉得这不是个空的啊...，这是个Vnode实例，和其他的Vnode一样，只不过children是空数组。可能要表达的空节点指的就是一个空壳
oldVnode = emptyNodeAt(oldVnode)
}
// replacing existing element
const oldElm = oldVnode.elm
// 找到父节点，对于初始化的节点来说，那就是body
const parentElm = nodeOps.parentNode(oldElm)
// create new node
// 将Vnode节点插入到宿主对象里
createElm(
vnode,
insertedVnodeQueue,
// extremely rare edge case: do not insert if old element is in a
// leaving transition. Only happens when combining transition +
// keep-alive + HOCs. (#4590)
oldElm._leaveCb ? null : parentElm,
nodeOps.nextSibling(oldElm)
)
...
// destroy old node，删除旧的节点
if (isDef(parentElm)) {
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
}
}
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
初始化
1.emptyNodeAt => 创建一个空的Vnode节点
2.调用createElm创建dom节点，内部递归调用createChildren去创建子节点，最后append到父节点
3.删除旧的节点
到这里所有vnode转换成真实dom展示在浏览器上，触发钩子callHook(vm, 'mounted')
update
1.用户点击事件，改变了data中的数据
2.触发了属性相关的set方法，调用dep.notify()，就是Watcher的Update方法
3.触发前置钩子callHook(vm, 'beforeUpdate’)；
4.执行watcher的run方法，即updateComponent
5.updateComponent方法先执行render的到最新的Vnode
6.调用_update中的__patch__方法，就是最上边patch的另一个入口
// 比较两个参数是否是相同类型的节点
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)
) || (
isTrue(a.isAsyncPlaceholder) &&
a.asyncFactory === b.asyncFactory &&
isUndef(b.asyncFactory.error)
)
)
)
}
sameVnode作用大概就是看下是否是相同类型的节点，比如tag属性，一个是div，另一个是p，那么就直接走下边的逻辑，直接渲染新的dom节点，删除旧的就行了，没必要做diff比较了。只有都是Vnode，又是相同类型节点，才有必要diff。
patchVnode
// 此函数就是打补丁操作，就是复用旧的节点元素，比如只修改内容
function patchVnode (
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
) {
if (oldVnode === vnode) {
return
}
...
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
let i
const data = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)
}
...
}
直接返回什么都不做的情况有两种
1.新旧节点一样
2.新旧节点的isStatic都是true，这是在complie阶段加的标识，就是静态节点的意思，比如<p><span>1</span><p/>，这类节点永远都不会变，直接复用旧的组件实例
更新节点的属性
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)
}
7个方法，依次更新相关属性
更新节点的childen
const oldCh = oldVnode.children
const ch = vnode.children
if (isUndef(vnode.text)) {
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
} else if (isDef(ch)) {
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(ch)
}
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
} else if (isDef(oldCh)) {
removeVnodes(oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) {
nodeOps.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) {
nodeOps.setTextContent(elm, vnode.text)
}
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
先贴段html
<div id="app">
<h1>
<span>sss</span>
</h1>
<p>{{obj.cur}}</p>
<button @click="handleClick">编辑</button>
</div>
h1的span对应的vnode
1.只需要setTextContent就行了
没有text的
1.新旧childen都有，执行updateChildren去比较，比较复杂，往下看
2.新的有，旧的没有。先清空旧的，再将新的children循环追加到父级
3.新的没有，旧的有。循环删除了
4.其他情况，不知道是啥，直接清空了旧的
updateChildren
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
// 记录下新旧children的开始、结束索引和对应的vnode。就像两个游标卡尺
// 从0开始，比较完了，游标卡尺向后挪一格子，继续比较
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)) {
// 当前旧的开始索引对应的vnode没有，卡尺向右挪一位
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
} else if (isUndef(oldEndVnode)) {
// 当前旧的尾索引对应的vnode没有，卡尺向左挪一位
oldEndVnode = oldCh[--oldEndIdx]
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// 新旧开始索引类型相同，先打补丁，再各自向右挪一格
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// 新旧尾索类型相同，先打补丁，再各自向左挪一格
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
// 旧的开始和新的尾索引相同，需要移动，就先给两个节点打个补丁
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
// 比如[1, 2, 3] => [2, 3, 1]
// 然后将旧的开始节点挪到旧的尾节点的后边
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, insertedVnodeQueue, newCh, newStartIdx)
// 比如[1, 2, 3] => [3, 1, 2]
// 然后将旧的尾节点挪到旧的开始节点的前边
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
// 新的卡尺往右挪一格，旧的往左挪一格
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
} else {
// 以上都不符合
// 找到旧的节点的key的集合
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
// 拿着开始索引的key去旧的key的集合去找
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
// 没有找到，就创建dom
if (isUndef(idxInOld)) { // New element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
// 旧的children有开始索引对应节点的key
vnodeToMove = oldCh[idxInOld]
// 从旧的children找到这个节点，还是先看是否类型相同
if (sameVnode(vnodeToMove, newStartVnode)) {
// 类型相同，打个补丁先
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
// 从老的children中删掉这个节点
oldCh[idxInOld] = undefined
// 将这个节点insert到children的前面，这个就是说旧的一堆节点中只有一个能用，那就把它放到队首，最后全删掉
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// 不是相同类型节点，还是先创建dom，再insert到父级
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
// 不管找没找到，复用没复用反正dom都有了，新的开始索引往右挪一格，再去找下一个
newStartVnode = newCh[++newStartIdx]
}
}
if (oldStartIdx > oldEndIdx) {
// 旧的开始索引溢出了，就是oldCh遍历完了，就将剩余的新的节点追加到父节点中
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {
// 新的遍历完了，就将剩余的旧的节点删掉了
removeVnodes(oldCh, oldStartIdx, oldEndIdx)
}
}
1.以上的打补丁就是复用旧的节点，将新的节点的值更新到旧的节点上。
2.patchVnode的过程中，如果子还有children，那就会再次updateChildren。
3.这无疑是个递归操作，但是从宏观上看，这确实是只比较了同级
/**
* 复述一下以上过程：
1.当前旧的开始索引对应的vnode没有，卡尺向右挪一位
2.当前旧的尾索引对应的vnode没有，卡尺向左挪一位
3.新旧开始索引类型相同，先打补丁，再各自向右挪一格
4.新旧尾索类型相同，先打补丁，再各自向左挪一格
5.旧的开始和新的尾索引相同，说明有可复用的节点。只需要移动，就先给两个节点打个补丁。
1.比如[1, 2, 3] => [2, 3, 1]
2.然后将旧的开始节点挪到旧的尾节点的后边
3.新的卡尺往左挪一格，旧的往右挪一格
6.旧的尾和新的开始索引相同，也要移动，同样先给两个节点打个补丁。
1.比如[1, 2, 3] => [3, 1, 2]
2.然后将旧的尾节点挪到旧的开始节点的前边
3.新的卡尺往右挪一格，旧的往左挪一格
7.以上都不符合，就先找到旧的节点的key的集合，拿着开始索引的key去旧的key的集合去找。
没有在旧的节点中找到新的可用的节点
就创建dom，插入到父级节点
在旧的children找到了开始索引对应节点的key。
先从旧的children找到这个节点，还是先看是否类型相同。
1.类型相同
1.打个补丁先
2.从老的children中删掉这个节点
3.将这个节点insert到children的前面，这个就是说旧的一堆节点中只有一个能用，那就把它放到队首，最后全删掉。
2.不是相同类型节点
还是先创建dom，再insert到父级
*/
最后管理wacther的队列，触发钩子callHook(vm, 'updated')； 源码调试地址
