三月小生

2026-01-16 技术

deepProxy

第一步

如果初始数据是多层对象嵌套的话，按照目前的逻辑，无法对深层对象进行代理，如下代码，值改变后，effect 不会重新执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>

<script type="module">
  import { reactive, effect } from...

继续阅读

2025-11-29 技术

防止递归调用

第一步

按照先有的逻辑，如果像下面这种方式使用的话，会导致死循环

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>

<script type="module">
  import { reactive, effect } from './reactivity.js';

  let obj = { name:...

继续阅读

2025-11-15 技术

effect 调度

第一步

目前的 effect，当数据改变之后，会自动重新执行，如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>

<script type="module">
  import { reactive, effect } from './reactivity.js';

  let obj = { name:...

继续阅读

2025-10-05 技术

依赖清理

第一步

上面的依赖收集中，会有这么个问题，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>

<script type="module">
  import { reactive, effect } from './reactivity.js';

  let obj = { name: 'xiaoming', age:...

继续阅读

2025-10-02 技术

依赖收集

第一步

先明确依赖收集时候，数据的格式：他是一个 Map 格式的，{ obj: { 属性: Map: { effect1, effect2 } } }

{
  { name: "xiaoming", age: 18 }: {
    name: {
      effect
    },
    age: {
      effect1, effect2
    }
  }
}

reactiveEffect.ts

import { activeEffect } from...

继续阅读

2025-08-17 技术

effect 实现

第一步

effect.ts

export function effect(fn, options?) {
  // fn 是用户传进来的要执行的函数
  const _effect = new ReactiveEffect(fn, () => {
    _effect.run();
  });

  _effect.run();

  return _effect;
}

class ReactiveEffect {
  //  默认创建的 effect 是响应式的
  public active = true;

  //...

继续阅读

2025-08-16 技术

reactive 实现

第一步

安装依赖：pnpm install @vue/shared --workspace --filter @vue/reactivity

packages/reactivity/src/reactive.ts

import { isObject } from '@vue/shared';

export function reactive(target) {
  return createReactiveObject(target);
}

export const mutableHandlers:...

继续阅读

2025-08-09 技术

reactive - 环境搭建

packages/reactivity/package.json

{
  // 模块的名称
  "name": "@vue/reactivity",
  "version": "1.0.0",
  // 打包后的文件名称和地址
  "module": "dist/reacticity.esm-bundler.js",
  "unpkg": "dist/reactivity.global.js",
  // 供打包时使用
  "buildOptions": {
    "name": "VueReactivity",...

继续阅读

2025-08-08 技术

mini Vue3（1） - 环境搭建

搭建 monorepo 环境

初始化项目

pnpm init
新增 pnpm 配置文件

.npmrc

Pnpm 安装扩展后，会将该扩展下所有依赖的包都放在自己的目录下面，而不是 node_modules 根目录下，增加下面的配置，可将依赖的包都提升到 node_modules 根目录下，这样可以解决一些依赖查找的问题

如果有多个扩展依赖同一个包，但是各自依赖的包的版本不一致，pnpm 这时不会将该扩展提升到根目录下，仍然是放在各自扩展的目录中

继续阅读