Vue.js视图层框架设计 - 命令式与声明式

659 阅读2分钟

Vue.js框架设计的权衡 - 命令式与声明式

引言

从编程范式的角度上来看,一个成熟的视图层框架通常分为命令式和声明式,它们各有各的优缺点,而Vue.js在框架的设计上采用的是以命令式实现内部的功能,而尽可能地把声明式暴露给用户使用

命令式编程

命令式编程最大的特点,也是有别于其它编程范式的特征就是:命令式编程关注的是过程

示例

用命令式编程风格将下列这段话翻译成代码

carbon (2).png

则对应的代码应如下:

carbon (6).png

有没有感受到很熟悉?这种平常常用的按照程序控制流程一步一步走下去的编程风格就是命令式编程。

声明式编程

与命令式编程关注过程不同,声明式编程更多的是关注结果。它只表达计算的逻辑而不去描述其中的控制流程,即告诉计算机需要计算什么,而不是教计算机如何去计算

示例

还是用上文命令式编程中的例子,声明式编程对应代码如下:

carbon (7).png

这段类HTML模板也就是Vue.js实现以上功能的方式,正如引言说道:Vue.js内部实现一定是命令式的,而暴露的用户的却更加声明式,那么为什么Vue.js要这样设计呢?

命令式与声明式的权衡

读到这里,静下来想一想,应该不难推断出:在Vue.js中,命令式编程在性能上一定是不弱于声明式编程的,因为Vue.js在内部是以命令式实现的。打个比方:假如现在需要将上文示例中的文本内容修改为hello vue3,那么命令式只需要直接调用相关命令进行操作即可,而声明式不行,它需要找到需求前后的变化,然后再在框架内部调用命令式的操作方法。

那有人就要问了:那为什么Vue.js要采用声明式的设计方案呢?原因就在于声明式代码的可维护更强,这也是我觉得Vue.js好学的原因,声明式编程明显看起来比命令式编程更容易上手嘛!至于如何“在保持可维护性的同时让性能损失最小化”,这就是尤大大他们关心的问题了。

声明

  • 本文属于读书笔记一类,是作者在拜读 霍春阳大佬的新作《Vue.js设计与实现》途中,以书中内容为蓝本,辅以个人微末的道行“填写”完成
  • 欢迎大佬斧正
  • 日更

参考资料