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

站长

2024年03月18日 14:37 · 阅读数 5

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

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选择了编译+运行的方式