目录
VUE3的h/createVNode函数【vue的概念模型】
Virtual DOM（组件化的概念模型）
VirtualDOM更新
WHY DOM-DIFF？
DOM-DIFF原理
DOM-DIFF伪代码
DOM-DIFF分类讨论：属性变更
DOM-DIFF分类讨论：节点类型不同
DOM-DIFF分类讨论：子节点变更1
DOM-DIFF分类讨论：子节点变更2
小结总结：常见误区
VUE3的h/createVNode函数【vue的概念模型】
h()是vue3提供的渲染函数
<h1>{{blogTitle}}</h1> => h('h1',{},this.blogTitle)
<anchored-heading :level="1">
<span>Hello</span>world!
</anchored-heading>
=>
h(
'anchored-heading',
{level: 1},
{default:()=>[h('span','Hello'),'world!']}
)Virtual DOM（组件化的概念模型）
让写作，创造更加方便
<Content>
<Button><div>点我</div></Button>
<p>Hi</p>
</Content>虚拟DOM结构式一个概念模型，像DOM又不是DOM
VirtualDOM更新
- 替换（例如Panel->Swiper）
- 插入（例如订单列表新增一个订单）
- 属性替换（例如修改div的颜色，修改Tabs的activeTab）
- 删除
思考：Virtual DOM更新怎么应用到DOM？
WHY DOM-DIFF？
function SomeComponent({a}) {
return <div>
<span>...</span>
<Button>...</Button>
{a && <p>新增的节点</p>}
</div>
}
<SomeComponent a={true} />
// 变成
<SomeComponent a={false} />
不用动态规划【一个算法简单有效又能工作，好读，易理解，就没必要用复杂算法】
不预先分析，要事后检验算法
DOM-DIFF原理
DOM-DIFF伪代码
//主体逻辑
function domDiff(...) {
let VDOMOld // 上一次调用SomeComponent产生的virtualDOM
...
update() {
const vdomNext = SomeComponent(...)
const patches = domDiff(vDOMOld, vDOMNext)
vDOMOld = vDOMNext
apply(dom, patches)
}
}DOM-DIFF分类讨论：属性变更
- 节点相同
- -vDOMOld.type === vDOMNext.type
- 例如：div的样式发生变更
- 方案：替换属性的补丁（更新）
DOM-DIFF分类讨论：节点类型不同
- 节点类型发生变化
- 例如：vue-router切换
- 方案：替换全部的补丁（更新）
<div>
<Couter />
</div>
// 到
<span>
<Counter />
</span>DOM-DIFF分类讨论：子节点变更1
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>
// 到
<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>- 如上情况中，如果想要识别Connecticut是插入，需要动态规划算法（增加比较的复杂度）
- DIFF算法可以考虑顺序比较
DOM-DIFF分类讨论：子节点变更2
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
// 到
<ul>
<li key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>- 如上情况中，当带有key时，vue可以识别变更
/**
* 这个是伪代码不可以真的执行
*/
// diff主体，在产生东西的时候，生成器函数加个*
function* domDIFF(vDOM1, vDOM2) {
// 插入 || 删除
if(!vDOM1 || !vDOM2) {
// 迭代器作用，yield会往外抛值
yield new InsertPatch(vDOM1, vDOM2)
return
}
if(vDOM1.type === vDOM2.type) { //节点类型一致
if(vDOM1.key === vDOM2.key) { // key值都一样
yield new AttributePatch(vDOM1, vDOM2) // 可能存在属性变更
yield * domDIFFArray(vDOM1.children, vDOM2.children) // diff当前vDOM的子节点
} else {
yield new ReplacePatch(vDOM1, vDOM2)
}
return
} else {
yield new ReplacePatch(vDOM1, vDOM2)
}
}
function toMap(arr) { // 做成key:value
const map = new Map()
arr.forEach(item => {
if(item.key)
map.set(item.key, item)
})
return map
}
// diff当前vDOM的子节点
function * domDiffArray(arr1, arr2) {
// 插入 || 删除
if(!arr1 || !arr2) {
yield new ReplacePatch(vDOM1, vDOM2)
return
}
const m1 = toMap(arr1)
const m2 = toMap(arr2)
// 需要删除的VDOM,m1有key，m2没有key时
const deletes = arr1.filter( (item, i) => {
return item.key ?
!m2.has(item.key)
: i >= arr2.length // 如果arr2子节点比arr1少,那也是要删除多的
})
for(let item of deletes){
yield new ReplacePatch(item, null)
}
// 需要Replace的VDOM
for(let i = 0; i <arr1.length; i++) {
const a = arr1[i]
if(a.key ) { // 有key的
if(m2.has(a.key)) {
yield * domDIFF(a, m2.get(a.key))
}
}
else {// 没有key的就去找对应的位置i
if(i < arr2.length) {// i 得小于 arr2的数
yield * domDIFF(a, arr2[i])
}
}
}
// 需要Insert的VDOM；arr1中有，arr2中没有
for(let i = 0; i <arr2.length; i++) {
const b = arr2[i]
if(b.key) {
if(!m1.has(b.key)) {// m1中没有arr2中的这个key时渲染
yield new InsertPatch(i, b)
}
}else { // 没有key时，长度i大于arr1就会渲染
if(i >= arr1.length) {
yield new InsertPatch(i, arr[2])
}
}
}
}
class InsertPatch {
constructor(pos, to){
this.pos = pos
this.to = to
}
}
class ReplacePatch {
constructor(from, to){
this.form = from
this.to = to
}
}小结总结：常见误区
- 为什么更新被称作patch（补丁）？这种增量更新的模式我们称为补丁，热更新
- 为什么不用动态规划（O(n^3)）算法？我们需要domDiff速度非常快，动态规划虽然会比对出最小更新，但是在比对时间上太耗时了，我们不一定要最小更新，比对时间+更新时间的最小值才是我们要的。
