命令式VS声明式
命令式
我们的前端代码中,大部分都是命令式思维,这种思维与我们现实是具备一定的一致性的,也就是说他不抽象,这也是为什么JavaScript是一门容易入门的语言。
比如我们想获取Dom1中的Dom2中的Dom3,并给其赋值“你好”,则我们的流程是
- 获取dom1
- 获取dom1中的dom2
- 获取dom2中的dom3
- 给dom3赋值你好
命令式编程相对于结果更加强调过程,非常好理解,但是命令式也有他的缺点,那就是一旦命令很长,代码也会非常难以维护。
声明式
而声明式则更多关注结果,究竟是什么样的过程,这并不是开发者需要关心。
我们依旧使用上面的例子,我们只需要在Dom3中进行{{ msg }}
声明,然后只关心何时更新其具体的值即可,msg是如何更新,这并不是开发者关心的问题,一般来说这些工作我们都是交给框架进行完成的。
如何评价?
评价一个框架的好坏,我们一般从2个角度出发
- 性能
- 可维护性
命令式编程是JavaScript自带的编程方式,毫无疑问性能是最好多,声明式则需要我们内部进行一些运算,但是在可维护性的角度上来说,声明式的代码要更加简单、直观,项目越复杂,越能体现声明式的可维护性
总结一下
性能:命令式 > 声明式(项目越大,差距越小)
可维护性:声明式 > 命令式(项目越大,差距越大)
企业应用的开发与设计原则
企业开发中,公司关注的无非就是以下2点
- 项目成本:就是开发周期的控制,如何更快更稳定的完成开发工作是首要目标
- 开发体验:开发体验式开发者的第一诉求(开发、维护难度),但是也符合公司诉求,因为好的开发体验可以加速开发进度
所以在企业纬度,可维护性是非常看重的一点,所以企业更加愿意使用声明式的开发方式
但是在性能的角度来说,命令式是一定高于声明式的,难道性能就不重要吗?
框架的取舍
- 在可维护性的角度 声明式 > 命令式
- 从性能的角度 命令式 > 声明式
所以框架设计上就希望可以兼顾两者,既要声明式,又要尽可能的保持性能不会太差,在性能与可维护性的基础上寻找一个平衡点,这就是框架的核心目标。
声明式框架的实现要素
声明式框架需要提前在html中进行声明,这并不符合html的规范,所以我们的vue中的HTMl代码其实并非真实的代码,而是通过内部的编译后,形成一个真实运行的代码。
而这在内部实现上,存在2个步骤
1. 编译(compiler)
1. 运行(runtime)
编译时
将模板代码编译为一种浏览器可读格式
框架为了开发体验,经常会提供一些更加人性化的写法,这些人性化的写法便于人类阅读,但是不利于机器阅读,所以需要将我们编写的代码编译为机器便于阅读的代码,在vue中,compile函数用于编译template为render函数认识的代码。
运行时
将vnode转变为当前平台实际运行的代码
在运行时阶段有两个非常重要的函数h render,h函数用于生成虚拟dom,也就是vnode,render函数则负责解析与渲染vnode到特定的平台,如果是web平台,则渲染为dom。
vue为何采用编译时 + 运行时
- 编译时+运行时的代码实现中,我们规避了直接操作dom,而是引入了vnode的概念,让我们对html的逻辑变成了对js的逻辑,运行速度大大增加
- 使用编译时 + 运行时可以将每个流程更加彻底的解耦合,使更多语言可以被编译,可以被运行到更多平台。
为什么vue3对ts支持更加友好?
首先vue3对ts支持友好并不是仅仅因为ts写的,这是一个片面的回答,vue3有用良好的类型校验与格式存在2种原因
- 大量编写type类型文件,让vue3+ts代码非常严谨
- api设计的前期就考虑到了这一点,尽管DSL实现类型推到非常麻烦,但是vue团队还是实现了