Vue3 源码分析 01 – 权衡的艺术

大家也可以去我的博客看相关技术文章,欢迎大家,一同进步!!!!

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选择了声明式呢?答案是可维护性

  1. 首先大多数人没有办法达到理论上的命令式最近性能
  2. 可维护性也是重要的一环

补充:虚拟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 代码,因此性能可能会更好,但是 这种做法有损灵活性,即用户提供的内容必须编译后才能用

  1. 存编译时的,必须编译后才能用,不够灵活

首先是纯运行时的框架。由于它没有编译的过程,因此我们没办法分析用户提供的内容,但是如果加入编译步骤,可能就大不一样 了,我们可以分析用户提供的内容,看看哪些内容未来可能会改变, 哪些内容永远不会改变,这样我们就可以在编译的时候提取这些信 息,然后将其传递给 Render 函数,Render 函数得到这些信息之 后,就可以做进一步的优化了

  1. 存运行时的,由于没有编译,无法去分析,优化困难

而vue3时编译+运行,后文会讲

  • 把template转化为render函数,编译时
  • 把render函数转化为vnode,渲染器渲染真实dom,运行时

总结

  • 视图层框架往往有多种方式,vue选择的是声明式框架
  • 声明式关乎结果的描述,内部隐藏命令式的实现,对外暴露声明式
  • 声明式的框架性能弱于命令式,但是带来了更好的可维护性,和更小的心智负担
  • 为了保证可维护性的前提下,虚拟dom的出现就是为了减小找到差异的那部分性能开销
  • 存运行时,难以优化,而存编译时又不够灵活,vue3选择了编译+运行的方式

原文链接:https://juejin.cn/post/7333761832471969792 作者:知无涯者

(0)
上一篇 2024年2月14日 上午10:15
下一篇 2024年2月14日 上午10:25

相关推荐

发表回复

登录后才能评论