大家好，我是Kason。都说中国人讲究中庸之道，但是讲究中国人为的框架吗？本文将从原理层面解释Vue如何在运行时和编译时之间保持适度的平衡。UI=fn(state)几乎所有的前端框架的工作原理都可以用下面的公式来概括：UI=fn(state)UI(view)可以通过state(状态)通过fn(framework)来计算。然而，原则上，框架差异很大。按照“更新粒度”可以分为三类：树级更新组件级更新节点级更新更新粒度没有好坏之分，只是对应不同的实现。下面我们简单了解下不同粒度更新方式的实现原理。假设有如下组件树，其中Cpn为自定义组件，其内部结构为ul>li*2：我们要将Cpn中的一个li更新为黄色：树级更新“树级更新”框架将生成一棵完整的树在生成过程中将“虚拟DOM树”与之前“虚拟DOM树”对应的节点进行比较：找到变化的节点后，执行对应的DOM操作。“树级更新”框架的特点是：依赖“虚拟DOM”，不关心触发更新的节点（因为会通过“虚拟DOM”全树比较找到）。使用这种更新方法最著名的框架是React。组件级更新上面的例子，如果是一个“组件级更新”的框架。会找到触发更新节点的组件，并生成该组件的“虚拟DOM树”（而不是整棵树的“虚拟DOM树”）。在生成过程中，会与组件之前的“虚拟DOM树”对应的节点进行比较：找到变化的节点后，执行对应的DOM操作。“组件级更新”框架的特点是：依赖“虚拟DOM”，关心触发更新的节点（“虚拟DOM”的比较会作用于节点所在的组件）。采用这种更新方式最著名的框架是Vue。如果节点级更新是“节点级更新”框架，编译时会根据“状态变化对应的DOM变化”直接生成相应的方法，当状态发生变化时会直接调用相应的方法.上面的例子中，颜色状态和changeColor方法在编译时会关联起来：.“节点级更新”框架的特点是：不依赖“虚拟DOM”，依赖预编译（建立状态与改变DOM的方法之间的联系）关心触发更新的节点（节点状态和更新方法一一对应）使用这种更新方法最著名的框架是Svelte。中等的Vue3Vue是“组件级更新”的代表，更新粒度介于“树级”和“节点级”之间。是在中间左边还是右边？Vue3说：想反复跳转，想在Vue3中有三种树结构：描述视图的树->虚拟DOM树->真实DOM树其中“描述视图的树”官方推荐使用“模板语法”"，但也可以使用JSX。无论哪种方式，它最终都会转化为“虚拟DOM树”。在使用JSX时，Vue3具有React运行时的灵活性。这时候，Vue3就可以看作是“React+Mobx的加强版”。在使用“模板语法”时，Vue3引入了“预编译”技术。至此，Vue3的工作流程可以细化为四个步骤：描述视图的树->VNode树->Block数组->真实DOM树其中VNode树就是常规意义上的“虚拟DOM树”，而块数组是“VNode”“Tree”是一个依赖于状态并且会发生变化的VNode数组。例如，对于以下模板语法： {{name}}
