人般一

脉络探索 在探索编程世界的深渊时，我们常常会遇到一些令人困惑的概念，尤其是当它们与我们现实生活中的事物息息相关时。面向对象编程（OOP）就是这样一个强大的概念，它不仅仅是一...

前言 可能大家在项目中已经都用上了双 token，可能你的 refresh_token 至今为止都没派上用场。 你可能已经看过了很多篇讲 token 无感刷新的文章了，看完...

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 ...

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

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

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

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

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

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

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

前言 为什么要写这篇文章，因为六年前信心满满的去面试某条（六年前我们还不叫它x跳动），结果被血虐，所以一直想着要写一篇面经。但是模板编译这个部分有点复杂，就一直拖拖拖，拖到...