是什么
1,虚拟dom:js直接操作dom的代价是相对昂贵的,每次操作dom都会让浏览器茶农头开始执行一遍流程,
每次更新执行一次,假若我某一次操作导致页面有10个节点更新,js直接操作dom就是10次浏览器计算,
而虚拟dom则会将10次更新对比旧代码保存在一个js对象(虚拟dom)中,然后一次性更新到Dom树上,这样就节省了大量无用的计算
而且,单个节点更新虚拟dom要比实际操作dom更新要快得多.
2,AST:vue模板想要转换成虚拟dom,就需要处理模板上插值,指令,而AST便是为了描述vue模板而生的,他可以通过对象来描述模板结构有什么,
需要执行什么,最后使用对应render函数生成新的虚拟dom,AST本身是不会变的,他只会在模板编译阶段出现,而后续的数据更新时不会变更AST,
变更只有AST上代表变量的值,然后经过render生成新的虚拟Dom
3,diff算法:所谓diff算法其实就是新虚拟dom与旧虚拟dom的对比算法
1)同层级对比,若相同再开始深度对比
2)深度对比优先,直到该分支的节全部对比完毕在移动位置对比其他分支
3)对比方式
a,此节点是否被移除 -> 添加新的节点
b,节点一样,属性是否被改变 -> 旧属性改为新属性
c,节点一样,文本内容被改变-> 旧内容改为新内容
d,节点要被整个替换 -> 结构完全不相同 移除整个替换
参考 https://www.cnblogs.com/simpul/p/11583383.html