我是日安

watch 是 Vue 中非常重要的一个 API，它允许开发者在响应式数据发生变化时，执行特定的副作用（side effects）。这些副作用可以是异步行为（例如发起请求）...

在上一篇文章中，我们提到将通过「缓存」机制来解决 computed 在访问时重复执行的问题。 在 Vue 3 的源码里，computed 是靠一个「脏值标记（dirty f...

今天我们要在保持既有链表架构不变的前提下，实现 computed 的惰性计算 + 缓存（dirty 旗标）与调度逻辑。 示例演示 先看官方代码的效果： 可以看到控制台会先输...

在完成 reactive 的基本实现之后，接下来会遇到几种常见且必须处理的情况： 原始对象传入 Reactive 对象 Reactive 对象再次传入 Reactive 对...

上一次我们提到： 每个对象的每个属性都需要自己的 Dep。 如何建立 target.a → Dep 的对应关系？ 如何在不污染原始对象的情况下存储这个关系？ 我们可以先来做...

在之前的文章中，我们已经完成了 ref 的实现，它能将原始值包装成响应式对象。现在，我们要接着完成响应式系统核心的另一部分：reactive 函数。我们的目标是接收一个完整...

在打造响应式系统时，一个容易遇到的状况是，effect 在执行期间同时“读取”又“写入”同一个依赖，这会造成自我触发 (self-trigger)。 effect 为了读值...

昨天，我们完成了“依赖清理”机制，让 effect 能够正确处理动态变化的依赖关系。然而，这也带来了一个新的性能问题：当依赖频繁变化时，系统需要不断地创建和销毁 Link ...

大家好，我是双越老师，也是 wangEditor 作者。 大家有没有发现一个现象：最近 1-2 年，前端圈不再关注源码了。源码是一种泡沫，随着招聘市场遇冷，现在泡沫破灭了，...

在实际情况中，effect 函数内部的依赖，常常因为条件分支（比如 if...else）而发生变化，这种情况称为「动态依赖」。 动态依赖会带来一个问题：在某次执行中不再被使...

在解决了链表节点指数增长的问题后，我们还需要关注依赖的有效性。 effect 的执行路径可能因为条件判断或程序逻辑不同而改变，导致某些依赖在本次执行中已经不再需要。 如果这...

昨天我们了解到，当 effect 函数依赖多个响应式变量时，会再次触发指数级更新。 我们来回顾一下之前的做法： run() 函数首先会将 depsTail 设为 undef...

昨天我们解决了单一依赖所导致的指数增长问题。然而，在真实的开发场景中，一个 effect 函数往往需要依赖多个响应式变量。现在我们试着新增多个依赖，在示例中加入第二个响应式...

昨天我们发现了 Effect 的问题：当 effect 被重复触发时，它会不断地重新收集依赖，导致依赖链表指数级增长。 要让 effect 记住它“订阅过谁”，最直接的方法...

DOM 交互 我们的响应式系统经过前几天的努力，已经初具雏形，感觉可以加入一些 DOM 交互，来进行简单的测试。 我们预期每次点击按钮，effect 只会执行一次。但实际情...

到目前为止，我们的 effect 会在依赖的数据发生变化时，立即重新执行。 这种简单直接的模式在很多情况下都有效，但当遇到密集且连续的数据变更时，它可能会引发不必要的性能问...

今天我们来探讨一个棘手的边界情况：嵌套 effect。 当一个 effect 内部又定义了另一个 effect 时，我们的系统会如何运作呢？ 在这种情况下，我们预期内外层都...

我们的代码虽然已经可以运作，但 RefImpl 这个类同时处理了数据存储和链表管理，不易于扩展，所以需要调整代码结构。尽管前几章的代码已经能正常工作，但它存在一个很大的问题...

昨天，我们了解了链表的核心概念，现在要把这些概念结合起来。 首先让我们从一个常见的场景开始：当一个响应式数据 (ref) 同时被多个 effect 依赖时，会发生什么？ 我...

在昨天，我们建立了响应式的基本运作模式。在继续深入之前，要先了解 Vue 内部用来优化性能的一个核心概念：数据结构。Vue 3 的响应式系统之所以效率高，其内部对数据结构的...