大家也可以去我的博客看相关技术文章,欢迎大家,一同进步!!!!
vue3 源码分析,第一篇章权衡的艺术,基于vue设计与实现的第一章,命令式与声明式、性能与可维护、运行时和编译时相关内容
目录
声明式 vs 命令式
首先,vue
是一个关注视图层的框架,而视图层框架往往存在两种形态
- 声明式:比如
vue
- 命令式:比如
jquery
两种框架各有特点,基于特点也就有对应的优缺
命令式
我们来看下命令式框架的特点,以jquery为例
$("#app") // 获取div
.text("hello world") // 设置文本内容
.on("click", () => {
// 绑定点击事件
alert("clicked");
});
可以看到,命令式更加关注过程,需要你关注每一步的实现细节。 符合我们直觉的逻辑
声明式
而声明式的框架呢?
<div @click="() => alert('ok')">hello world</div>
可以看到,同样的结果,我们是去描述这样一个想要的结果,而具体的实现细节被框架隐藏掉了
而vue作为声明式框架,方便我们开发,它内部也是命令式的实现,但是对外暴露式声明式的
性能 vs 可维护
那么,命令式和声明式的性能如何呢?
- 命令式的代码性能消耗: A
- 声明式的代码性能消耗: A + B
A为直接修改的性能开销,这个B是声明式,他们去找到差异所需要的性能开销
性能层面上,命令式更优
那为什么vue选择了声明式呢?答案是可维护性
- 首先大多数人没有办法达到理论上的命令式最近性能
- 可维护性也是重要的一环
补充:虚拟dom的出现,就是为了最小化找到差异的性能开销A,让其最小化而出现的,这也是vue他们在保证可维护性的前提下,最优性能的尝试
最后补充书中提到的三种更新视图方案的对比
方案 | 性能 | 可维护性 | 心智负担 |
---|---|---|---|
原生JavaScript计算 | 性能高 | 差 | 心智负担大 |
虚拟dom | 性能中等 | 可维护性高 | 心智负担小 |
innerHTML | 性能最差 | 可维护性中等 | 心智负担重等 |
虚拟 DOM,它是声明式的,因此心智负担小,可维护性 强,性能虽然比不上极致优化的原生 JavaScript,但是在保证心智负担 和可维护性的前提下相当不错。
运行时 vs 编译时
纯运行时
function render(obj, root) {
// ... 不用关心具体实现
}
存编译时
存编译时
// xxx html
<div>123</div>;
// 直接编译为命令时的代码
const div = document.createElement("div");
div.textContent = "123";
优劣
假如我们设计的框架是纯编译时的,那么它也可以分析用户提供的内容。由于不需要任何运行时, 而是直接编译成可执行的 JavaScript 代码,因此性能可能会更好,但是 这种做法有损灵活性,即用户提供的内容必须编译后才能用
- 存编译时的,必须编译后才能用,不够灵活
首先是纯运行时的框架。由于它没有编译的过程,因此我们没办法分析用户提供的内容,但是如果加入编译步骤,可能就大不一样 了,我们可以分析用户提供的内容,看看哪些内容未来可能会改变, 哪些内容永远不会改变,这样我们就可以在编译的时候提取这些信 息,然后将其传递给 Render 函数,Render 函数得到这些信息之 后,就可以做进一步的优化了
- 存运行时的,由于没有编译,无法去分析,优化困难
而vue3时编译+运行,后文会讲
- 把template转化为render函数,编译时
- 把render函数转化为vnode,渲染器渲染真实dom,运行时
总结
- 视图层框架往往有多种方式,vue选择的是声明式框架
- 声明式关乎结果的描述,内部隐藏命令式的实现,对外暴露声明式
- 声明式的框架性能弱于命令式,但是带来了更好的可维护性,和更小的心智负担
- 为了保证可维护性的前提下,虚拟dom的出现就是为了减小找到差异的那部分性能开销
- 存运行时,难以优化,而存编译时又不够灵活,vue3选择了编译+运行的方式
原文链接:https://juejin.cn/post/7333761832471969792 作者:知无涯者