Vue 3.2 源码系列（Vue.js的设计与实现）01-命令式VS声明式

?

我通过看完这本书后造成的一部分总结。选择挑选出重要的部分?

先来介绍一些基本的概念

1. 命令式?与?声明式
2. 运行时?与?编译器
3. 副作用

一.声明式和命令式?

命令式与声明式的概念在前端框架的设计中经常会出现，那么究竟什么是?命令式、什么是?声明式?呢？这一咖，我们就主要来明确这两个概念：?

命令式

比如现在领导叫你实现一个大屏展示的数据

1.你现在需要用到vue

2.需要用到springboot

3.需要去考虑一些echarts的参数

...

在上面的例子中，我们详细的描述你自己实现的过程，那么这种：详细描述做事过程的方式?就可以被叫做?命令式。

声明式?

所谓?声明式?指的是：不关注过程，只关注结果?的一种编程方式。

那么具体指的是什么意思呢？

我们还是通过刚才那个例子，来进行明确：

你的领导只关注你的结果，不关注你实现的过程，只在意你实现了，还是没有实现。

?

命令式VS声明式?

其实声明式来说，他也是需要去跟命令式一样的一个做法，但是对于命令式进行一个隐藏，?

性能：

我们通过一个同样的需求来去分析命令式与声明式在性能方面的表现：

需求：为指定 div 设置文本为 “hello world”

针对以上需求，我们通过命令式的方式来进行代码实现，得出代码为：

div.innerText = "hello world" // 耗时为：1

这个代码是实现此功能的最简代码，我们把它的耗时比作为：1（注意：耗时越少，性能越强）。

然后我们来看声明式的代码实现：

<div>{{ msg }}</div> <!-- 耗时为：1 + n --> <!-- 将 msg 修改为 hello world -->

那么：已知实现该需求最简单的方式是 div.innerText = "hello world" 。

所以说无论声明式的代码是如何实现的文本切换，那么它的耗时一定是 > 1 的，所以我们把它的耗时比作 1 + n。

所以，由以上举例可知：命令式的性能 > 声明式的性能

?可维护性

分析完了性能的对比之后，接下来我们来分析可维护性的对比。

可维护性代表的维度非常多，但是通常情况下，所谓的可维护性指的是：对代码可以方便的 阅读、修改、删除、增加 。

那么同步了这个认知之后，对于可维护性的衡量维度就非常简单了。

所谓的可维护性的衡量维度，说白了就是：代码的逻辑要足够简单，让人一看就懂

?如下：

// 命令式实现

// 1. 获取到第一层的 div
const divEle = document.querySelector('#app')
// 2. 获取到它的子 div
const subDivEle = divEle.querySelector('div')
// 3. 获取第三层的 p
const subPEle = subDivEle.querySelector('p')
// 4. 定义变量 msg
const msg = 'hello world'
// 5. 为该 p 元素设置 innerHTML 为 hello world
subPEle.innerHTML = msg
?

// 声明式实现

<div id="app">
? <div>
? ? <p>{{ msg }}</p>
? </div>
</div>
?

对于以上代码而言：声明式?的代码明显更加利于阅读，所以也更加利于维护。

所以，由以上举例可知：命令式的可维护性 < 声明式的可维护性

总结?

由以上分析可知，无论是声明式也好、命令式也好，他们从不同的维度去进行分析时，得出的结论也会不相同：

1. 针对性能维度：命令式的性能 > 声明式的性能
2. 针对可维护性维度：命令式的可维护性 < 声明式的可维护性

所以针对于这两种编程方式而言，本身就没有好坏之分。我们所需要做的是：根据需求的场景，来进行对应的取舍。