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