Vue源码之虚拟DOM和diff算法(二) 手写diff算法
个人练习结果仓库(持续更新):Vue源码解析
patch函数简要流程
新旧节点不是同一个虚拟节点(新节点内容是 text)
不做过多解释了...container, myVnode1) // 上树
const myVnode2 = h('h2', {}, 'hi')
patch(myVnode1, myVnode2)
newVnode和...section', {}, [
h('p', {}, '赤'),
h('p', {}, '蓝'),
h('p', {}, '紫')
])
patch(myVnode1, myVnode2)
diff...,则直接在旧子节点中寻找相同key的元素,不存在的话,新增并将该元素追加到旧前指针之前,新前指针下移
删除
位置变换
增 + 删 + 位置变化
key一样,节点内容却不同的情况
详解Vue的Diff...oldVnode.children, newVnode.children)
}
src \ updateChildren.js
没什么难度,看原理总结慢慢写就行了(谨慎点)
阉割版本,只需要 sel和