第6章、原始值的响应式方案
6.1 引入 ref 的概念
既然原始值无法使用 Proxy 我们就只能把原始值包裹起来。
function ref(val) {
const wrapper = {
value: val,
};
Object.defineProperty(wrapper, '__v_isref', {
value: true,
});
return reactive(wrapper);
}
为了判断一个对象是否是原始值的包裹对象，添加一个不可写不可枚举属性来判断。
6.2 响应丢失问题
响应丢失问题就是我们在通过扩展运算符获取响应式对象的值后，我们得到的值变成了普通对象。
const obj = reactive({ foo: 1, bar: 2 })
const newObj = {
...obj,
}
effect(() => {
console.log(newObj.foo)
})
obj.foo = 100
可以在新建对象，然后把对应属性的get访问器设置为读取之前对象的值，这样就可以出发响应了。
function toRef(obj, key) {
const wrapper = {
get value() {
return obj[key]
},
set(val) {
obj[key] = val
}
}
Object.defineProperty(wrapper, '__v_isref', {
value: true,
})
return wrapper
}
const newObj = {
foo: toRef(obj, 'foo'),
bar: toRef(obj, 'bar'),
}
如果属性多的时候，需要进行批量转换
function toRefs(obj) {
const ret = {}
for (let key in obj) {
ret[key] = toRef(obj, key)
}
return ret
}
const newObj = { ...toRefs(obj) }
自动脱 ref
我们在模板中使用 ref 对象值的时候，不需要用户再添加 .value 去使用，所以需要有一个自动脱 ref 的功能。思路就是通过一个 Proxy 代理对象，在读取的值为 ref 时，再读取对象的 .value 值，同时设置值也应该有自动设置到 value 属性的功能。
function proxyRefs(target) {
return new Proxy(target, {
get(target, key, receiver) {
const value = Reflect.get(target, key, receiver)
return value.__v_isRef ? value.value : value
},
set(target, key, newValue, receiver) {
const value = target[key]
if (value.__v_isRef) {
value.value = newValue
return true
}
Reflect.set(target, key, newValue, receiver)
},
})
}
响应式总结
