Vue 中的权衡的艺术此章节主要介绍了一些vue框架设计的一些基本概念：命令式和声明式这两种范式的差异，以及二者对框架设

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

命令式还是声明式？

范式从本质上讲是一种理论体系、理论框架。在该体系框架之内的该范式的理论、法则、定律都被人们普遍接受。小标题中的命令式和声明式就是js中的范式。

简单来说命令式 指的就是：关注过程 的范式。而 声明式 指的就是： 关注结果 的范式。

来看看相关代码，用命令式和声明式完成这么一个功能：

命令式：

声明式：

Vue中的HTML模板就是声明式编程，只需要关注要实现怎样的结果，vue会帮你搞实现该结果的过程，当然vue肯定也是使用命令式来实现的。

首先必须要知道的是命令式的性能肯定优于声明式的性能。

原因很简单，命令式的代码就是最底层的代码，直接通过原生的js实现的，没有比这个更简单的了。声明式无论内部做了什么，性能消耗肯定大于直接编写命令式代码。

声明式代码的优点在于可维护性，声明式代码的心智负担是小于命令式代码，越简单的代码的可维护性越高。

鱼和熊掌不可得兼？

在Vue中还有虚拟DOM这个概念，如果需要用js修改页面，那么会有这么三种方式：原生 JavaScript、innerHTML、虚拟 DOM

人都是喜欢折中的，可维护性和心智负担最合适的虚拟DOM方式，就是vue选择的更新页面的方式。

首先应该理解一下小标题中的这俩关键词的概念：

运行时：利用 render 函数，直接把虚拟 DOM 转化为真实 DOM 元素，这里的render函数可以理解为输入为虚拟DOM节点的树状结构，输出是真实DOM元素。
编译时：直接把vue中的 template 模板中的内容，转化为真实 DOM 元素。

如果只关注性能，那么单单编译时的框架性能理论上优于包含有运行时的框架。

vue框架所使用的是运行时+编译时，具体过程如下：

主要原因在于纯运行时无法分析用户的提供的虚拟DOM对象，vue这个选型既可以编译时+运行时，也可以让用户自己调用complier直接使用运行时。