最近,我在重新翻看 vue3 的设计与实现,或许,可以重新理解下 vue 这个框架。
今天,从命令式编程范式,到声明式编程范式,简单聊聊我的一些理解。
命令式编程范式 #
命令式编程范式,通俗来讲,即面向过程编程,我们需要罗列具体要执行的每一个步骤,并一一执行。这,就是命令式编程范式。
举个例子:我要在html渲染一个按钮,按钮文本是“提交”,点击后,触发提示“提交成功”。
如果是命令式编程范式,我们需要这样写:(纯js实现)
// 1. 创建一个按钮元素
const button = document.createElement('button')
// 2. 设置按钮文本
button.textContent = '提交'
// 3. 定义点击事件处理函数
function handleClick() {
console.log('提交成功')
}
// 4. 绑定点击事件
button.addEventListener('click', handleClick)
// 5. 将按钮添加到文档中
document.body.appendChild(button)声明式编程范式 #
声明式编程范式,通俗来讲,即面向结果编程,我们只需要描述我们想要的结果,而不需要描述具体的实现步骤。这,就是声明式编程范式。
继续上面的例子,我们用声明式编程范式来实现:(vue3 实现)
<button @click="console.log('提交成功')">
提交
</button>声明式编程范式的理念是:开发者只需要关心如何去描述结果,而无需关心底层实现。
区别 #
声明式范式的优势在于:
- 可读性好
- 可维护性高
命令式范式的优势在于:
- 灵活性高
- 性能好 当然,这里命令式范式说的性能好仅仅在于轻量应用,对于复杂应用,命令式范式的性能可能会下降,因为代码太过臃肿,可能存在重复调用情况。
总结 #
命令式编程范式和声明式编程范式,各有各的优势,我们需要根据具体的场景,选择合适的编程范式。vue3 就是一个典型的声明式编程范式的框架,我们只需要描述我们想要的结果,而不需要描述具体的实现步骤。通过研究这类框架,我们可以提高自己架构方面的能力。