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