前言

本书第一章主要讨论了命令式和声明式这两种范式的差异，以及二者对框架设计的影响，还讨论了虚拟 DOM 的性能状况，最后介绍了运行时和编译时的相关知识，并介绍了 Vue.js 3.0 是一个运行时 + 编译时的框架。

前段时间把mongodb权威指南看了一半并输出了八篇文章，也算是对mongodb有了些了解，现在的计划是把以前看了小半没看完的Vue设计与实现看完并输出系列文章，同步的也在补全对源码的了解，这应该是另一个坑。该系列是对霍春阳大佬的Vue设计与实现进行要点总结、扩展及抽象。

命令式和声明式

早年间流行的 jQuery 就是典型的命令式框架。命令式框架的一大特点就是关注过程。

与命令式框架更加关注过程不同，声明式框架更加关注结果。

使用jQuery实现一个button是命令式，一步一步实现过程。

 $('#app') // 获取 div
   .text('hello world') // 设置文本内容
   .on('click', () => { alert('ok') }) // 绑定点击事件

而使用Vue实现一个button则是结果式，声明一个结果，Vue底层实现过程。

<div @click="() => alert('ok')">hello world</div>

对于框架来说，为了实现最优的更新性能，它需要找到前后的差异并只更新变化的地方

理论上命令式代码可以做到极致的性能优化，因为我们明确知道哪些发生了变更，只做必要的修改就行了。

为什么 Vue.js 要选择声明式的设计方案呢？原因就在于声明式代码的可维护性更强。

声明式代码的更新性能消耗可以分为找出差异的性能消耗和直接修改的性能消耗两部分。

在涉及 DOM 的运算中，性能消耗通常远高于在 JavaScript 层面的计算。

直接操作原生 JavaScript 使用 innerHTML 更新页面时，即使只修改了一个文字，也会导致重新设置整个文字的 innerHTML 属性。

重新设置 innerHTML 属性相当于销毁所有旧的 DOM 元素，然后全量创建新的 DOM 元素。

相比之下，虚拟 DOM 在更新页面时只会更新必要的元素，而 innerHTML 需要全量更新。

对于虚拟 DOM，无论页面大小如何，都只会更新发生变化的内容。然而，对于 innerHTML 而言，页面越大，更新时的性能消耗就越大。

原文内容我觉得并不够通俗易懂，最简单的运行时和编译时例子是 JS 和 JAVA，JS可以直接运行在运行在浏览器环境或者V8环境的编程语言，这可以称之为运行时。而JAVA则必须要先编译成字节码才能运行，则是编译时。

Vue、React、SolidJS和Svelte都是编译时预编译（AOT）框架，而Vue是平衡教派的，不管是近年不断更新的新语法特性还是在此的运行和编译都讲究平衡统一多样。

浏览这篇文章可以帮助理解本书中关于运行时和编译时的内容。运行时？还是编译时？前端框架的角斗场