vue diff算法分析
diff存在的意义
1.对服务端和浏览器端统一一层虚拟dom,这样无论是服务器预编译runTime还是
在浏览器运行都会形成统一,各部分之间相互隔离。例如
const vnode={
tagName:'div',
attrs:{
'data-name':'test'
},
context:'${Vue}',
data:'a.b',
}
2.性能优化。性能优化的来源渲染和预编译的ast 语法转换。在服务器dev环境时,通过编译模板形成模板渲染函数,渲染时只需要调用对应的渲染函数,减少渲染,同时形成函数缓存,不用每次计算。
<div>{{a*b+2*c}}</div>
const render = (a,b,v) =>{
return a*b+2*c;
}
vue diff算法核心 比较是old 和新的 虚拟dom 对象层次递归比较的,
1.相识性
const sameVnode=>(a, b) {
return (
// key来源于v-for或者自定的:key属性
a.key === b.key &&
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)
)
}
相似就不更新,不相似就update
2.比较过程
1. old 序列为 ABCD 新序列为 ABD
直接删除C节点
2. old 序列为 BACD 新序列为 ABD
vue保留B react干掉B