《Vue进阶教程》第三十一课：ref的初步实现
往期内容：
《Vue进阶教程》第二十课：lazy懒执行
《Vue进阶教程》第二十一课：支持缓存
《Vue进阶教程》第二十二课：自定义更新(调度器)
《Vue进阶教程》第二十三课：渲染计算属性的结果
《Vue进阶教程》第二十四课：优化
《Vue进阶教程》第二十五课：watch基本概念
《Vue进阶教程》第二十六课：实现侦听函数
《Vue进阶教程》第二十七课：实现侦听对象
《Vue进阶教程》第二十八课：实现新旧值
《Vue进阶教程》第二十九课：立即执行的回调
《Vue进阶教程》第三十课：watchEffect
1 为什么需要ref
由于proxy只能代理引用类型数据(如: 对象, 数组, Set, Map...), 需要一种方式代理普通类型数据(String, Number, Boolean...)
设计ref主要是为了处理普通类型数据, 使普通类型数据也具有响应式
除此之外, 通过reactive代理的对象可能会出现响应丢失的情况. 使用ref可以在一定程度上解决响应丢失问题
2 初步实现
1) 包裹对象
既然proxy不能代理普通类型数据, 我们可以在普通类型数据的外层包裹一个对象
用proxy代理包裹的对象(wrapper). 为了统一, 给包裹对象定义value属性, 最后返回wrapper的代理对象
function ref(value) {
const wrapper = {
value: value,
}
return reactive(wrapper)
}测试用例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./reactive.js"></script>
</head>
<body>
<script>
function ref(value) {
const wrapper = {
value: value,
}
return reactive(wrapper)
}
// count是一个proxy对象
const count = ref(1)
effect(() => {
// 访问proxy对象的属性 触发 getter 收集依赖
console.log(count.value)
})
setTimeout(() => {
count.value = 2
}, 1000)
</script>
</body>
</html>
2) 添加标识
按照上面的实现, 我们就无法区分一个代理对象是由ref创建, 还是由reactive创建, 比如下面的代码
ref(1)
reactive({value: 1})为了后续能够对ref创建的代理对象自动脱ref处理, 即不用.value访问.
考虑给ref创建的代理对象添加一个标识
示例
function ref(value) {
const wrapper = {
value: value,
}
// 给wrapper添加一个不可枚举, 不可写的属性__v_isRef
Object.defineProperty(wrapper, '__v_isRef', {
value: true,
})
return reactive(wrapper)
}在Vue3源码中, 虽然不是按上述方式实现的, 但是可以这样去理解