编程范式
针对于目前的前端开发而言，主要存在两种
编程范式，这两种范式一般是相对来说的。
- 命令式编程
- 声明式编程
命令式编程
那么首先我们先来说什么叫做命令式
具体例子：
张三的妈妈让张三去买酱油
那么张三怎么做呢？
- 张三拿起钱
- 打开门
- 下了楼
- 到商店
- 拿钱买酱油
- 回到家
以上的流程详细的描述了，张三在买酱油的过程中，每一步都做了什么。那么这样一种：详细描述做事过程 的方式就可以被称为 命令式。
那么如果把这样的方式放到具体的代码实现之中，又应该怎么做呢？
我们来看一下这样的一个事情：
在指定的div中展示”hello world“
//html 部分
<div id="app"></div>
//js 部分
//获取div
const divEle=document.querySelector('#app')
//为该div设置innerHTMl为hello world
divEle.innerHTML="hello world"
改代码虽然只有两步，但是它清除的描述了：完成这件事情，所需要经历的过程
那么假设我们所做的事情，变得更加复杂了，则整个过程也会变得更加复杂。
比如：
为指定的的div的子元素的子元素p标签，展示变量msg
那么通过命令式完成以上功能，则会得出如下逻辑与代码：
//html 部分
<div id="app">
<div>
<p></p>
</div>
</div>
//js部分
// 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>{{msg}}</div>
对于这个代码，大家是不是感觉有些熟悉？
没错就是vue中非常常见的双大括号语法。所以当我们写vue模板语法的时候、其实一直写的就是声明式编程。
那么声明式编程具体指的是什么意思呢？
还是已刚才的例子为例：
张三的妈妈让张三去买酱油
那么张三怎么做呢？
- 张三拿起钱
- 打开门
- 下了楼
- 到商店
- 拿钱买酱油
- 回到家
在这个例子中，我们说：张三所做的事情就是命令式，那么张三的妈妈所做的就是事情就是声明式。
在这样的一个事情中，张三妈妈只是发布了一个声明，她并不关系张三如何去买的酱油，只是关心最后的结果。
所以说，所谓的声明式指的是：不关注过程，只关注结果的范式。
同样，如果我们通过代码来进行表示的话，以下例子：
为指定的的div的子元素的子元素p标签，展示变量msg
<div id="app">
<div>
<p>{{msg}}</p>
</div>
</div>
再这样的代码中，我们完全不关心 msg 是怎么渲染到 p 标签的，我们所关心的只是：在 p 标签中，渲染指定文本而已。
最后做一个总结，什么叫做声明式呢？
声明式是：关注结果的一种编程范式，它并不关心完成一个功能的详细逻辑与步骤。(注意：这并不意味着声明式不需要过程！声明式只是把过程进行了隐藏而已！)
命令式vs声明式
在我们了解了命令式与声明式之后，对比这两种编程范哪一种比较好？
通常情况下，我们评价一个编程范式通常会从两个方面入手：
- 性能
- 可维护性
那么接下来我们就通过这两个方面，来分析一下命令式和声明式。
性能
性能一直是我们在进行项目开发时特别关注的方向，那么我们通常如何来表述一个功能的性能好坏呢？
我们来看一个例子：
为指定 div 设置文本为 "hello world"
那么针对于这个需求而言，最简单的代码就是：
div.innerText="hello world" //耗时为1
你应该找不到比这个更简单的代码实现了。
那么此时我们把这个操作的耗时比作:1。（ps：耗时越少，性能越强）
然后我们来看声明式，声明式的代码为：
//耗时为1+n 将msg修改为hello world
<div>
{{msg}}
</div>
那么：已知修改 text 最简单的方式是 innerText,所以说无论声明式的代码是如何实现的文本切换，那么它的耗时一定是>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>
对于以上代码而言，声明式的代码明显更加利于阅读，所以也更加利于维护。
所以，由上举例可知：命令式的可维护性<声明式的可维护性
