我是日安

我一直都没有发出这最后一篇文章，主要是因为这也只是个心得总结，后续也没有了（哈哈） 在学习 Vue 3 的过程中，我很幸运能遇到远方的帮助。他是 Vue3 的核心成员，也是...

在开始 readonly 之前，我们先补充一下 Proxy 的知识： Proxy Proxy 是实现 reactive、readonly 等功能的核心。它会在目标对象前架设...

ref 与 reactive 都属于深层响应 (deep) API。它们会递归地将内部所有嵌套对象都转换为响应式代理。在多数情况下这非常方便，但当处理大型数据结构时，这种深...

在响应式系统中，reactive 能够将一个对象转换为深层的响应式对象，但是在开发过程中，我们时常会需要用到解构赋值，这时候会导致响应性丢失。 问题解析 执行这段代码，你会...

在我们构建响应式系统的过程中，虽然对于原生 JavaScript 对象的处理已经相当完善，但数组 (Array) 与普通对象的属性不同，数组的 length 属性与其数值索...

watch 的一个核心用途，是在响应式数据发生变化时执行 副作用（Side Effect）。 然而，当副作用是异步的或需要手动清理时，就会出现一个常见问题： 如果监听的数据...

Watch 常用的选项有： immediate：初始化立即执行一次 deep：深度监听 once：只执行一次，执行后自动停止监听 我们先写一个函数，接受三个参数，默认值是空...

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 函数往往需要依赖多个响应式变量。现在我们试着新增多个依赖，在示例中加入第二个响应式...