《Vue.js 设计与实现》读书笔记 - 第6章、原始值的响应式方案 & 响应式总结
2023-03-14 09:45:52 时间
第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)
},
})
}
响应式总结
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的