67. ref和reactive实现
1. ref 实现原理
当我们调用 ref
函数时,会返回一个包含一个 .value
属性的对象。这个对象会被转换成 Proxy
对象,通过拦截 get
和 set
操作,实现对 .value
属性的监听。当读取 .value
属性时,会触发 get
操作,将 .value
属性的值返回。当修改 .value
属性时,会触发 set
操作,将新的值赋给 .value
属性。
以下是 ref
函数的简单实现:
// 实现 ref 函数
function ref(value) {
let _value = value;
const handlers = {
get(target, key, receiver) {
if (key === 'value') {
return _value;
}
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
if (key === 'value') {
_value = value;
return true;
}
return Reflect.set(target, key, value, receiver);
}
};
return new Proxy({}, handlers);
}
2. reactive 实现原理
当我们调用 reactive
函数时,会将传入的普通 JavaScript
对象转换为一个 Proxy
对象,通过拦截 get
和 set
操作,实现对整个对象的监听。当读取对象的属性时,会触发 get
操作,返回对应属性的值。当修改对象的属性时,会触发 set
操作,将新的值赋给对应的属性。
以下是 reactive
函数的简单实现:
// 实现 reactive 函数
function reactive(obj) {
const handlers = {
get(target, key, receiver) {
const value = Reflect.get(target, key, receiver);
if (typeof value === 'object') {
return reactive(value);
}
return value;
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
return result;
}
};
return new Proxy(obj, handlers);
}