《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_isRefObject.defineProperty(wrapper, '__v_isRef', {value: true,})return reactive(wrapper)
}在Vue3源码中, 虽然不是按上述方式实现的, 但是可以这样去理解