今天学到了什么#

• defineProperty和Proxy和customRef中get和set的区别
• 什么是依赖，有什么用？

defineProperty和Proxy和customRef中get和set的区别#

把这三个东西拆开来讲，你会更好理解：它们都出现了“get / set”字样，但“拦截的对象”和“触发更新的机制”完全不是一回事。

1）Object.defineProperty：给“某个对象的某个属性”装门禁

它做的事：在对象 obj 的某个属性 key 上，安装一个“属性描述符”，里面可以放 get() / set(v)。

• 你读 obj.key → 会走这个 get()
• 你写 obj.key = v → 会走这个 set(v)
• 只对这个属性生效（想拦截 100 个属性，就得装 100 次）

示例（核心感觉）：

1
const obj = {};
2
let _x = 0;
3

4
Object.defineProperty(obj, 'x', {
5
  get() {
6
    console.log('get x');
7
    return _x;
8
  },
9
  set(v) {
10
    console.log('set x', v);
11
    _x = v;
12
  }
13
});
14

15
obj.x;      // get x
16
obj.x = 10; // set x 10

它的“天生短板”（也是 Vue2 当年要打补丁的原因）：

• 只能拦截已存在并且你“装过门禁”的属性
  obj.newKey = 123 这种“新增属性”，默认不会被拦截（除非你再 defineProperty 一次）
• 删除属性 delete obj.x、遍历 Object.keys(obj)、in 操作符等，不像 Proxy 那么容易统一拦截
• 数组下标、length 变化等场景很麻烦（可以做，但成本高、坑多）

一句话：defineProperty = “按属性装监控”。

2）Proxy：给“整个对象”套一个代理壳

Proxy 的思路完全不同：不是在对象内部每个属性上装 getter/setter，而是在对象外面套一层“代理”。

• 你对代理对象做任何操作（读、写、删、遍历、in、Reflect.ownKeys……）
• 都会先进入对应的“trap（陷阱函数）”
• Vue 3 的 reactive() 就是这个路线

示例：

1
const raw = { a: 1 };
2

3
const p = new Proxy(raw, {
4
  get(target, key, receiver) {
5
    console.log('proxy get', key);
6
    return Reflect.get(target, key, receiver);
7
  },
8
  set(target, key, value, receiver) {
9
    console.log('proxy set', key, value);
10
    return Reflect.set(target, key, value, receiver);
11
  },
12
  deleteProperty(target, key) {
13
    console.log('proxy delete', key);
14
    return Reflect.deleteProperty(target, key);
15
  }
16
});
17

18
p.a;        // proxy get a
19
p.b = 2;    // proxy set b 2   （新增属性也能拦截）
20
delete p.a; // proxy delete a  （删除也能拦截）

Proxy 的关键特点：

• 能“天然覆盖”新增/删除/遍历/数组等更多操作（不仅仅是 get/set）
• 但注意：只有对“代理对象 p”操作才会触发拦截
  你要是绕过代理去改原对象 raw.a = 2，Proxy 是感知不到的（Vue 3 也同理：要用响应式对象本身）

一句话：Proxy = “按对象整体代理”。

3）customRef 的 get/set：不是 JS 拦截，而是 Vue 给你的“依赖收集/触发更新”钩子

customRef 是 Vue 提供的 API，用来创建一个“ref”，但让你自己决定：

• 什么时候把当前组件/副作用函数记录为依赖（track()）
• 什么时候通知依赖更新（trigger()）

它的 get() / set() 不是在拦截某个对象属性，也不是 Proxy trap；它只是定义 myRef.value 被读取/赋值时，Vue 内部该怎么“追踪/更新”。

典型用途：防抖 ref、节流 ref、按条件触发更新、异步合并更新等。

示例：防抖 ref（最经典）：

1
import { customRef } from 'vue';
2

3
function debounceRef(initialValue, delay = 300) {
4
  let value = initialValue;
5
  let timer;
6

7
  return customRef((track, trigger) => ({
8
    get() {
9
      track();       // 告诉 Vue：有人依赖了这个 value
10
      return value;
11
    },
12
    set(newValue) {
13
      clearTimeout(timer);
14
      timer = setTimeout(() => {
15
        value = newValue;
16
        trigger();   // 告诉 Vue：现在才更新依赖
17
      }, delay);
18
    }
19
  }));
20
}

这段代码里发生的事情是：

• 组件渲染时读了 r.value → 会进 get() → track() → 组件被记录为依赖
• 你频繁 r.value = ... → 会进 set()，但你不立刻 trigger()，而是延迟触发
  所以界面不会每次都更新，只在 delay 后更新一次

一句话：customRef = “自定义 ref 的追踪/触发时机”。

把差异用一句话对齐（最重要）

• Object.defineProperty 的 get/set：拦截的是对象属性访问本身
• Proxy 的 traps：拦截的是对整个对象的各种操作
• customRef 的 get/set：拦截的是ref.value 的读写，并决定何时 track/trigger（影响 Vue 更新）

常见误区（你可能正卡在这里）

1. “customRef 的 get/set 和 Proxy 的 get/set 是不是一样？”

• 不一样。
  Proxy 的 get/set 是“JS 层面的拦截机制”；customRef 的 get/set 是“Vue 响应式系统里的一套协议”。

2. “defineProperty 也能写 get/set，那是不是就等价 Proxy？”

• 不等价。
  defineProperty 是“属性级”，Proxy 是“对象级 + 更全的操作类型”。

3. “为什么 Vue3 用 Proxy 还要有 customRef？”

• Proxy 解决的是“对象/数组的响应式拦截全面性”。
  customRef 解决的是“更新策略”：比如防抖、节流、异步合并，这些不是 Proxy 本身能表达的。

什么是依赖，有什么用？#

在 Vue 响应式里，“依赖（dependency）”指的不是“某个变量依赖另一个变量”，而是：

• 某段会自动重新运行的函数（组件渲染函数、computed、watchEffect、watch 的回调等）
• 依赖了某个响应式数据的读取结果
• 所以当这个数据变化时，这段函数需要被重新执行

换句话说：依赖 = “订阅者列表”里的订阅者。
谁订阅？就是那些“读了响应式数据、并且需要在数据变更后重新跑”的函数。

1
import { ref, watchEffect } from 'vue'
2

3
const count = ref(0)
4

5
watchEffect(() => {
6
  console.log('effect run, count =', count.value)
7
})
8

9
count.value++ // 会让上面的 watchEffect 再跑一次

1
dep = Set<effect>  // 依赖集合：一堆需要重跑的 effect
2
track() => dep.add(activeEffect)

1
trigger() => dep.forEach(effect => effect.runOrSchedule())