从模板到虚拟Dom 再到 DOM树

是什么

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，节点要被整个替换 -> 结构完全不相同 移除整个替换

    4）优化策略

         注意：只有在同一个虚拟节点才会精细比较，否则直接删除，比如,ul里的10个li

         a，旧前与新前

         b，旧后与新后

         c，旧前与新后

         d，旧后与新前

 

 

 

 

参考  https://www.cnblogs.com/simpul/p/11583383.html