一，vdom（virtual dom）
用js模拟dom结构，计算出最小的变更，操作dom
二，diff算法概述
1，diff即对比，是一个广泛的概念
2，两个js对象也可以做diff
3，两棵树做diff，如这里的vdom diff
三，树diff和vdom的diff
1，树diff的时间复杂度O（n^3）
1），遍历tree1，遍历tree2...
2），排序
3），1000个节点，要计算1亿次，算法不可用
2，vdom的diff算法，优化时间复杂度到O（n）
1），只比较同一层级，不跨级比较
2），tag不相同，则直接删掉重建，不再深度比较
3），tag和key，两者都相同，则认为是相同节点，不再深度比较
三，用js模拟DOM结构
js数据结构
html数据格式
四，生成vnode（借鉴snabbdom.js）（h函数返回vnode）
VNode类
VNodeData数据格式
1，最主要是属性：tag(比如：div，p，span)、data、children、key、text
2，VNode分为以下几类
1），TextVNode 文本节点。
2），ElementVNode 普通元素节点。
3），ComponentVNode 组件节点。
4），EmptyVNode 没有内容的注释节点。
5），CloneVNode 克隆节点，可以是以上任意类型的节点，唯一的区别在于isCloned属性为true
五，patch函数的diff算法将改变渲染到dom上（patch(elem,vnode)和patch(vnode,newVnode)）
patch函数
1，判断是否为vnode
判断标签是否存在
2，创建一个空的vnode，关联到这个dom元素(Element)
创建空vnode
3，比较vnode是否相同
比较vnode的key和标签
4，patchVnode：这个函数做的事情是对传入的两个 vnode 做 diff，如果存在更新，将其反馈到 dom 上
patchVnode函数
1），hooks：更新节点属性
2），updateChildren（https://juejin.im/post/5b9200865188255c672e8cfd）
1，新旧节点的开始和开始比较
2，新旧节点的结束和结束比较
3，新旧节点的开始和结束比较
4，新旧节点的结束和开始比较
5，新旧节点开始或者结束节点为空
6，比较新节点在旧节点中的key和tag（标签）
7，key的重要性（key使用固定的数值，不能使用随机数）
key使用和不使用的区别
3），removeVnodes
removeVnodes函数
4），addVnodes
addVnodes函数
六，总结
1，vdom核心概念：h，vnode，patch，diff，key等
2，vdom存在的价值：数据驱动视图，控制dom操作
网友评论