2019 JSConf.Asia尤雨溪：在框架设计中寻求平衡

因此，对支付产用例来说，最有也许的环境是你必要用户事先编译，这样对付构建步调来说是一个硬性要求，这是不行停止的，要么在运行中举办编译，要么在预构建中举办编译，个中涉及我们此刻或多或少风俗的全部node.js器材链。但假如你能停止的话，对付初学者来说是件功德。

OK，因此，Vue 又一次夹在中间，我想再次夸大，这不是说 Vue 是最好的。

可是，Vue 的渲染机制奇异之处在于，假如你真的将模板团结到 VDOM 中，那么我们可以同时拥有 VDOM 和模板编译。

以是我们可以充实操作这两点。

我们有做过机能测试：在编译步调中发生的出格优化，我们不做渲染成果，稍后我将具体先容这一点。

在 vue2.x 版本，我们现实上还没有充实操作这个机遇，当前 vue 2.x 中的 VDOM 机能这块示意平平。

但我交涉下 3.0 对这点所做的事，让它可以更快。

尚有示意力，你可以跳过模板层直接进入渲染函数，直接操作JavaScript来执行恣意伟大的逻辑。

因此，当你感受本身受到模板束缚时，这会为你提供一条出路。

弱点是，尽量我们此刻确实很快，我们也许永久不会比 SVELTE 感受起来快。由于 SVELTE 的输出是最平凡的 JavaScript。然而，为了兼容手写的渲染函数，Vue 如故必要维护 VDOM，这样一来常量则必不行少。另一方面，它也会发生分歧，即我到底应该行使哪一种方法？

因此，许多用户固然可以行使渲染函数，但他们也许从未行使过它。

此刻让我们把它放到我们通过文件做的工作上，将 Vue 的模板编译成 VDOM，其运行速率比平凡的 VDOM 要快。

这就是我们适才已经接头过的，这个模板只有一个节点会改变。抱负状态下我们只需直接更新 message 字符串，节点布局是静态的，而且从来不会产生变革，只有一个动态节点。

以是，假如我们研究这个模板可以看出它是个很是简朴的例子。

当我们有相同于 v-if 这样的对象时，它会变得有点伟大，我们称之为 JSX 中的布局指令，它相等于是按照前提返回差异功效判定的三元表达式。

此刻，这会建设一个动态节点布局，由于该节点也许存在或也许不存在。

为了处理赏罚这种简朴的 VDOM Diff 算法，假设节点列表已经改变，那么我们必要对两个子数组举办 Diff 操纵。

可是假如我们实行将其拆分，会看到 v-if 将模板拆分为两个嵌套块。

我们来思索一下，假如将 v-if 自己看作一个节点，外部块则会有一个静态节点内容、节点布局。

在 v-if 内部，它也是静态的。我们有两个静态块，在每个块内，你无需对节点次序举办 Diff 操纵，你独一要做就是这个块内部举办数组的扁平化操纵。

同理，对付每个 v-for 迭代我们也可以将其当作一个静态块。

因此，假如你有更多像 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 节点，每次迭代城市动态绑定一些类可能文本。

（编辑：湖南网）

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