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

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));

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

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++; // 修改数据，触发更新