云阁

破解浏览器缓存之谜：为何你的 Webpack 应用总是无法自动更新？ 你是否也经历过这样的场景：刚刚加班加点修复了一个线上紧急 Bug，满怀信心地通知用户刷新页面，得到的反...

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

本文将以发布订阅者的视角来探索ref、computed、watch和render之间的底层关系。重点关注Dep-发布者核心类和ReactiveEffect-订阅者核心类。...

响应式就是当数据变化时会自动执行某些操作。但是，computed的响应式和ref和reactive有所不同，ref和reactive是发布订阅者模式中的发布者，而compu...

BFF是一种Web架构，全名为Backends For Frontends，即为服务于前端的后端。BFF一般指的是在前端与后端之间加增加一个中间层。...

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

本节的内容会分为两个部分，前面的部分我会为你展示基于标准的定义实现Promise的大致过程。而剩余的部分，我会从标准的角度为你展示，Async函数是如何实现异步编程的。...

TypeScript 的配置就像装修房子，刚开始总觉得越多越好，后来才发现简洁实用最重要。毕竟，我们的目标是写业务代码，不是玩配置杂技，对吧？...

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

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

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

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

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

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

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

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

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

VSCode插件批发商，独立开发陈随易的第14个小产品，FTP解压部署，鼠标点击2次，即可一键部署项目到线上。...

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