命令式与声明式
命令式 => 关注过程。
比如Jquery
框架。我们要实现一个功能,我们会一步一步的去敲代码对它进行实现。比如先获取dom
元素,再绑定事件,再实现效果……
声明式 => 关注结果
比如vuejs
,我们绑定一个点击事件,直接使用@click
进行事件绑定,并不需要关注它是如何绑定的。但其实对于vuejs来说内部实现肯定也是命令式的,但是对于用户来说显然是声明式的。
性能权衡
声明式代码性能并不优于命令式代码。
比如对于以下代码:
<html>
<div>
<span>我是span</span>
<div id="dom">
dom
</div>
</div>
</html>
对于命令式代码,我们可以直接使用
dom.textContent = "修改后的内容"
对其进行修改,并且找不到更优的解决办法。
对于声明式框架而言,我们还需要找到需要改动的代码的位置,因为我们不是明确的知道哪儿发生了更改。所以可以这样说。
命令式消耗 = 更新代码的消耗;
声明式消耗 = 更新代码的消耗 + 找出差异的消耗;
虚拟dom
虚拟dom
其实就是一个描述真实dom
的JavaScript
对象。它的存在,便是为了减少上述的找出差异的消耗
而诞生的。将这一步骤优化至JavaScript
算法层面,而不是操作真实的dom
层面。
因为框架的设计不仅要考虑框架的可维护性还需要考虑用户以及开发者的心智负担,原生JavaScript性能固然最优,但没人能保证你能一直写出最优异的代码同时还保证开发速度。
框架的运行时和编译时
运行时:直接使用函数进行dom
的操作。其实类似vuejs
中的render
函数。
编译时:比如使用标签形式进行dom
的结构的搭建,再将其转换。转换的过程,其实就是编译。
对于vuejs3
来说,它就是一个编译时 + 运行时的框架。