vue3静态标记

vue2与vue3都有静态标记
区别在于
vue2只能标记全量的静态
比如

{{name}}

在vue2中 只要有某一个属性是动态的，那么这个元素都要diff
而vue3中 上面的例子 就只会diff children 了 （更细致）

https://vue-next-template-explorer.netlify.app/

image.png

这里1就是静态标记 。这里就是说只diff TEXT

image.png

比如这里我们增加了class ，静态标记就变为3了

image.png

当我们增加动态属性时，静态标记为11 。里面能够区分 sex 不是 动态的

image.png

动态数据{{name}}改为 {{1+2}} ，没有用变量，只用到常量 。此时动态标记仍然能区分出来。静态标记变为了10. 不在diff TEXT 了。

vue2如果有动画，diff高于16.6毫秒还没处理完就会发生卡顿。因为需要diff的数据太多了。

vue3 采取的是优化静态标记(即使是动态节点，也只diff动态的模块)， 由于处理 的很好，减少了计算量， 速度比vue2快1.2~2倍

React Fiber 没有减少计算量，而是把宏观的树转换为链表， 链表的特点是可中断，diff过程中一旦达到16.6ms的阈值。就会把控制器交给 浏览器执行动画，下一帧控制器返给react, 继续进行上一帧没有执行完的diff。