带你彻底弄懂 vue3.6 数据响应式系统 alien-signals (上集)带你彻底弄懂 vue3.6 数据响应式系

带你彻底弄懂 vue3.6 数据响应式系统 alien-signals

一、前置知识

什么是 signal

signal 是响应式系统中的基本状态单元，每个 signal 包含了原始值，依赖链条和订阅链条。每当原始值值更新了，所有的订阅者都会自动触发更新。同理，依赖链条上的 signal 有更新，当前 signal 也会触发更新。而包括 alien-signals 在内的响应式系统优化目标，就是通过数据结构及算法设计，让这些链条的通讯变得更快。

什么是图

在多节点拓扑关系中，可以通过图去描述，譬如向这个关系中，我们可以通过一张二维表去描述，这样一来，横向看是每个节点的出度，相当于响应式系统中的订阅链条，而纵向看就是每个节点的入度，相当于响应式系统中的依赖链条。这个大家先记住，能辅助大家更好的理解后面要讲的内容。

什么是数据关系

关于建立数据关系，我们就必须参考一下数据库了，这是最接近数据的。我们用 mysql 为例，如果班级和学生是一对多的关系，往往我们会通过学生表上的班级 id 字段，关联起班级和学生两张表之间的数据关系。这里有同学会可能会问，在班级表上设定一个 students 字段去存储学生 id 列表是不是也可以？从数据关系上看，原则上没问题，但这样对于数据库的查询是非常不友好的，所以往往在做数据库设计不会采取这种方式。但如果一旦遇到多对多的情况，就难免会出现这样的情况了，要不在班级表上存储学生列表，要不就要在学生表上存储班级列表，甚至为了优化查询，有时候两边都需要冗余对方信息，这样对于查询不友，也极大的增加了维护成本，譬如解除一段关系，就需要 2 边数据一起改，新增一段关系，也是一样。为了解决这个问题，在数据库设计上，我们往往会新增一张 班级-学生-关系表 去维护两份实体数据之间的关系，把实体与关系之间分割开，创建和消除关系都在关系表中操作，既提高了效率也降低了维护成本。

二、响应式数据依赖构建 - 过程分析

step1: step2: step3: step4: step5:双向链表 step6:终局 通过双向链表，构建起各个 signal 之间的依赖和订阅关系。横向看是每个 signal 的订阅关系，相当于一张图中节点的出度。纵向看是每个 signal 的依赖关系，相当于一张图中节点的入度，清晰表达了各个节点之间的依赖关系。