Vue3是如何实现响应式系统的？Proxy和Object.defineProperty又有什么区别？-JXin的博客

Proxy 和 Object.defineProperty
- Proxy 和 Object.defineProperty 的使用
- Proxy 和 Object.defineProperty 的区别
Vue3 响应式系统

在Vue2中，使用了 Object.defineProperty 来实现响应式数据。而Vue3 则使用了 Proxy 新特性来实现。

Proxy 和 Object.defineProperty

Proxy 是 ECMAScript 6 (ES6) 中引入的新特性，首次出现在 2015 年的 ECMAScript 2015 规范中。而Vue首次发布是在 2014 年，所以使用的还是 Object.defineProperty，而Vue2是在 2016 年发布，虽然现代浏览器已经支持Proxy，但是支持度还不够广泛，且还需要考虑其它原因，例如迁移的成本，所以Vue2使用的也是 Object.defineProperty

Proxy 和 Object.defineProperty 的使用

Proxy

const handler = {
	get(target, prop, receiver) {
		// 拦截写入
		console.log(`Getting ${prop}`);
		return Reflect.get(target, prop, receiver);
	},
	set(target, prop, value, receiver) {
		// 拦截写入
		console.log(`Setting ${prop} to ${value}`);
		return Reflect.set(target, prop, value, receiver);
	},
	deleteProperty(target, prop) {
		// 拦截删除
		console.log(`Trying to delete property ${prop}`);
		return Reflect.deleteProperty(target, prop);
	},
	ownKeys(target) {
		// 拦截枚举
		console.log("Enumerating properties");
		// 自定义枚举行为，例如：隐藏某些属性
		return Reflect.ownKeys(target);
	},
};
const obj = new Proxy({}, handler);

obj.a = 1;
console.log(obj.a);
delete obj.a;
console.log(obj);
obj.c = 10;
console.log(Object.keys(obj));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Proxy

target：原始对象
prop：对象属性
receiver：代理对象本身
value：对象值

Object.defineProperty

const obj = {};
Object.defineProperty(obj, "a", {
	get() {
		console.log("Getting a");
		return 1;
	},
	set(value) {
		console.log(`Setting a to ${value}`);
	},
});

obj.a = 1; // Setting a to 1
console.log(obj.a); // Getting a

// 控制台打印
// Setting a to 1
// Getting a
// 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Proxy 和 Object.defineProperty 的区别

Proxy：Proxy 可以拦截对象上的几乎所有操作，包括属性的读取、写入、删除、枚举、函数调用等。它可以作用于整个对象，而不仅仅是某个特定的属性。且 Proxy 的性能相对较好，特别是对于大规模动态数据结构的处理，因为它不需要显式地为每个属性设置拦截器。

Object.defineProperty：只能定义或修改对象的特定属性的行为，无法作用于整个对象。它只能拦截属性的读取和写入操作，无法拦截删除、枚举等操作。因为每个属性都需要单独定义，这可能会导致较大的性能开销。

特性	Proxy	Object.defineProperty
拦截范围	整个对象，几乎所有操作	特定属性的读取和写入操作
对新属性的支持	自动拦截新属性	需要再次调用定义新属性
对数组和函数的支持	非常方便	麻烦且不直观
性能	较好	处理大量属性时性能较差

Proxy 提供了更强大和灵活的机制来拦截和自定义对象的行为，适用于需要全面拦截对象操作的场景。而 Object.defineProperty 更适合在需要对特定属性进行精细控制的情况下使用。

Vue3 响应式系统

Vue3 的响应式系统基于 依赖收集 和 触发更新 两个阶段。每个响应式对象都有一个依赖集合，当一个响应式数据被读取时，当前的副作用函数（比如组件渲染函数）会被记录为它的依赖。当响应式数据变化时，这些依赖会被通知，触发相应的更新。

let activeEffect = null;

function effect(fn) {
	activeEffect = fn;
	fn();
	activeEffect = null;
}

const reactiveHandler = {
	get(target, key) {
		if (activeEffect) {
			// 收集依赖
			target.dep.add(activeEffect);
		}
		return target[key];
	},
	set(target, key, value) {
		target[key] = value;
		// 触发更新
		target.dep.forEach((effect) => effect());
		return true;
	},
};

function reactive(obj) {
	obj.dep = new Set();
	return new Proxy(obj, reactiveHandler);
}

// 使用示例
const state = reactive({ count: 0 });

effect(() => {
	console.log(`Count is: ${state.count}`); // 读取state.count值时会触发 Proxy 的 get
});

state.count++; // 修改数据，触发更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37