PatchFlags优化
Diff算法无法避免新旧虚拟DOM中无用的比较操作，通过patchFlags来标记动态内容，可以实现快速diff算法
<div>
<h1>Hello Jiang</h1>
<span>{{name}}</span>
</div>
1
2
3
4
2
3
4
此template经过模板编译会变成以下代码：
const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("h1", null, "Hello Jiang"),
_createTextVNode(),
_createElementVNode("span", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
]))
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
生成的虚拟DOM是：
{
type: "div",
__v_isVNode: true,
children:[
{type: 'h1', props: null, key: null, …}
{type: Symbol(), props: null, key: null, …}
{type: 'span', props: null, key: null, …}
],
dynamicChildren:[{type: 'span', children: _ctx.name, patchFlag: 1}]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
此时生成的虚拟节点多出一个dynamicChildren属性。这个就是block的作用，block可以收集所有后代动态节点。这样后续更新时可以直接跳过静态节点，实现靶向更新
动态标识
export const enum PatchFlags {
TEXT = 1, // 动态文本节点
CLASS = 1 << 1, // 动态class
STYLE = 1 << 2, // 动态style
PROPS = 1 << 3, // 除了class\style动态属性
FULL_PROPS = 1 << 4, // 有key，需要完整diff
HYDRATE_EVENTS = 1 << 5, // 挂载过事件的
STABLE_FRAGMENT = 1 << 6, // 稳定序列，子节点顺序不会发生变化
KEYED_FRAGMENT = 1 << 7, // 子节点有key的fragment
UNKEYED_FRAGMENT = 1 << 8, // 子节点没有key的fragment
NEED_PATCH = 1 << 9, // 进行非props比较, ref比较
DYNAMIC_SLOTS = 1 << 10, // 动态插槽
DEV_ROOT_FRAGMENT = 1 << 11,
HOISTED = -1, // 表示静态节点，内容变化，不比较儿子
BAIL = -2 // 表示diff算法应该结束
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
靶向更新实现
export { createVNode as createElementVNode }
let currentBlock = null
export function openBlock(){ // 创建block
currentBlock = []
}
export function closeBlock(){ //关闭block
currentBlock = null;
}
export function createElementBlock(type,props?,children?,patchFlag?){ // 创建block元素
return setupBlock(createVNode(type,props,children,patchFlag))// 将动态元素挂载到block节点上
}
export function setupBlock(vnode){
vnode.dynamicChildren = currentBlock;
closeBlock();
return vnode;
}
export function createTextVNode(text: ' ', flag = 0) { // 创建文本虚拟节点
return createVNode(Text, null, text, flag)
}
export function toDisplayString(val){ // 就是JSON.stringify
return isString(val)? val : val == null ? '' :isObject(val)? JSON.stringify(val): String(val);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export const createVNode = (type,props,children = null,patchFlag =0)=>{
// ...
if(currentBlock && vnode.patchFlag > 0){
currentBlock.push(vnode);
}
return vnode;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
虚拟节点创建
const Com = {
setup(){
let state = reactive({name:'jw'});
setTimeout(() => {
state.name = 'zf'
}, 1000);
return {
...toRefs(state)
}
},
render(_ctx){
return (openBlock(),createElementBlock('div',null,[
createElementVNode("h1", null, "Hello Jiang"),
createElementVNode("span", null, toDisplayString(_ctx.name), 1 /* TEXT */)
]))
}
}
createRenderer(renderOptions).render(h(Com),document.getElementById('app'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
靶向更新
const patchElement = (n1,n2) =>{ // 比较两个元素的差异
let el = (n2.el = n1.el);
const oldProps = n1.props || {}
const newProps = n2.props || {}
let {patchFlag} = n2;
if(patchFlag){ // 单独处理标识属性
if(patchFlag & PatchFlags.CLASS){
if(oldProps.class !== newProps.class){
hostPatchProp(el,'class',null,newProps.class);
}
}
if (patchFlag & PatchFlags.TEXT) {
if (n1.children !== n2.children) {
hostSetElementText(el, n2.children)
}
}
}else{ // 处理所有属性
patchProps(oldProps,newProps,el);
}
if(n2.dynamicChildren){ // 比较动态节点
patchBlockChildren(n1,n2);
}else{
patchChildren(n1,n2,el);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function patchBlockChildren(n1,n2){
for(let i = 0 ; i < n2.dynamicChildren.length;i++){
patchElement(n1.dynamicChildren[i],n2.dynamicChildren[i]);
}
}
1
2
3
4
5
2
3
4
5
由此可以看出性能被大幅度提升,从tree级别的比对，变成了线性结构比对。
BlockTree
为什么我们还要提出blockTree的概念？ 只有block不就挺好的么？ 问题出在block在收集动态节点时是忽略虚拟DOM树层级的。
<div>
<p v-if="flag">
<span>{{a}}</span>
</p>
<div v-else>
<span>{{a}}</span>
</div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
这里我们知道默认根节点是一个block节点，如果要是按照之前的套路来搞，这时候切换flag的状态将无法从p标签切换到div标签。 解决方案：就是将不稳定的结构也作为block来进行处理
不稳定结构
所谓的不稳结构就是DOM树的结构可能会发生变化。不稳定结构有哪些呢？ （v-if/v-for/Fragment）
v-if
<div>
<div v-if="flag">
<span>{{a}}</span>
</div>
<div v-else>
<p><span>{{a}}</span></p>
</div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
编译后的结果:
return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", null, [
(_ctx.flag)
? (_openBlock(), _createElementBlock("div", { key: 0 }, [
_createElementVNode("span", null, _toDisplayString(_ctx.a), 1 /* TEXT */)
]))
: (_openBlock(), _createElementBlock("div", { key: 1 }, [
_createElementVNode("p", null, [
_createElementVNode("span", null, _toDisplayString(_ctx.a), 1 /* TEXT */)
])
]))
]))
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Block(div)
Blcok(div,{key:0})
Block(div,{key:1})
1
2
3
2
3
父节点除了会收集动态节点之外，也会收集子block。 更新时因key值不同会进行删除重新创建
v-for
随着v-for变量的变化也会导致虚拟DOM树变得不稳定
<div>
<div v-for="item in fruits"></div>
</div>
1
2
3
2
3
return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.fruits, (item) => {
return (_openBlock(), _createElementBlock("div"))
}), 256 /* UNKEYED_FRAGMENT */))
]))
}
1
2
3
4
5
6
7
2
3
4
5
6
7
可以试想一下，如果不增加这个block，前后元素不一致是无法做到靶向更新的。因为dynamicChildren中还有可能有其他层级的元素。同时这里还生成了一个Fragment，因为前后元素个数不一致，所以称之为不稳定序列。
稳定Fragment
<div>
<div v-for="item in 3"></div>
</div>
1
2
3
2
3
<div>hello world</div>
<p>Jiang wen</p>
1
2
2
静态提升
← setup函数 模板转化AST语法树 →