因此，如果你有更多像 v-if 、内嵌 v-for 的写法，你只是在进一步将代码拆分成嵌套块。

所以，我们最终得到一种我称之为 Block Tree（区块树）的东西，这只是一种玩法。

但 Block Tree 是一个嵌套块的块列表，因为每个块中都有一个完全静态的节点结构，所有没有必要使用递归到下层去对子列表进行 Diff 操作。

在每个块中，你只有一个单一扁平化数组节点可能会发生改变，我们还提供了其它组织上的提示。例如，如果一个节点只有一个动态 class 绑定，我们有条捷径，即你只需直接设置 class，然后就可以继续执行，而不必对 Props 进行 Diff 操作。

所以，对于同一模板的 Diff，vue2.x 版本和 vue3.x 版本的做法会有明显的区别。vue2.x 版本我们需要做一个完整的 Diff 操作，vue3.x 版本我们就只需通过使用一个单一扁平化数组（包含一个动态文本节点），而你唯一需要做的事情就是比较文本是否发生了改变。

对此，我们做了一个简单的基准测试（benchmark）， 做 1000 个 v-for 列表迭代，每个块有 12 个 dom 节点，总共 12000 个 dom 节点，每次迭代都会动态绑定一些类或者文本。

然后我们在页面上做了 4000 个动态绑定，然后对其更新。我们做了 100 次运行，在目前 2.6 的版本，更新时间要 36ms，而在目前 3.0 的版本中，使用新的编译策略，只需要大概 5.4ms，比之前快了6倍多。

注意，（数据）仅限于这个基准测试。真实的应用中你可能会有一个不同的数字，但或多或少，它都会更快，这是一个基准。

五、状态

然后，在状态机制这块，我可能没有时间去真正深入研究这个问题，它可能会是另外一个演讲的话题。

六、总结

但是还是总结一下，当你试图去设计一个框架时，最佳平衡点在哪？

或许这个问题应该重新表述下。是否存在一个完美的平衡点？它又是否是一个单一的完美的平衡点，甚至是以 JS 开发人员作为一个整体的最佳平衡点？

因为像我们所有人一样，都在努力去优化我们正在构建的一些特定又不同的东西。

比如说 SVELTE，它的优势在于当你构建一些小的东西时，它可以产出非常轻量级的代码。它也非常快，消耗内存也非常少，所以它甚至可以像嵌入式设备一样使用。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!