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源码中, 虽然不是按上述方式实现的, 但是可以这样去理解
3 响应丢失问题
> 将`reactive`定义的代理对象** 赋值**给其它变量时, 会出现** 响应丢失问题** >赋值主要有如下三种情况:
:::danger
- 如果将
reactive定义的代理对象的属性赋值给新的变量, 新变量会失去响应性 - 如果对
reactive定义的代理对象进行展开操作. 展开后的变量会失去响应性 - 如果对
reactive定义的代理对象进行解构操作. 解构后的变量会失去响应性
:::
1) 赋值操作
> 示例 ><!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>const obj = reactive({ foo: 1, bar: 2 })// 将reactive创建的代理对象的属性赋值给一个新的变量foolet foo = obj.foo // foo此时就是一个普通变量, 不具备响应性effect(() => {console.log('foo不具备响应性...', foo)})foo = 2</script></body>
</html>
obj.foo表达式的返回值是1- 相当于定义了一个普通变量
foo, 而普通变量是不具备响应性的
2) 展开操作
> 示例 ><!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>const obj = reactive({ foo: 1, bar: 2 })// 展开运算符应用在proxy对象上, 会从语法层面遍历源对象的所有属性// ...obj ===> foo:1, bar:2const newObj = {...obj,}// 此时的newObj是一个新的普通对象, 和obj之间不存在引用关系console.log(newObj) // {foo:1, bar:2}effect(() => {console.log('newObj没有响应性...', newObj.foo)})// 改变newObj的属性值, 不会触发副作用函数的重新执行// 此时, 我们就说newObj失去了响应性newObj.foo = 2</script></body>
</html>:::tips
说明
这里对proxy对象展开会经历如下过程
- proxy对象属于异质对象(exotic object)
- 当没有自定义proxy对象的[[GetOwnProperty]]内部方法时, 会使用源对象的方法, 获取所有属性
- 调用GetValue, 获取属性值
参考文献
ECMAScript规范2022-对象初始化
:::
2) 解构操作
> 示例 ><!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>const obj = reactive({ foo: 1, bar: 2 })// 对proxy对象进行解构操作后, foo和bar就是普通变量, 也失去了响应性let { foo, bar } = objeffect(() => {console.log('foo不具备响应性', foo)})// 给变量foo赋值, 不会触发副作用函数重新执行foo = 2</script></body>
</html>对proxy对象解构后, foo就是一个普通变量, 也失去了跟obj的引用关系.
因此, 对foo的修改不会触发副作用函数重新执行
4 toRef与toRefs
1) 基本使用
为了解决在赋值过程中响应丢失问题, Vue3提供了两个API- toRef: 解决赋值问题
- toRefs: 解决展开, 解构问题
使用演示
<!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="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script></head><body><script>const { reactive, effect, toRef, toRefs } = Vue// obj是reactive创建的响应式数据(proxy代理对象)const obj = reactive({ foo: 1, bar: 2 })effect(() => {console.log('obj.foo具有响应性:', obj.foo)})// 使用toRef定义, 取代基本赋值操作 foo = obj.fooconst foo = toRef(obj, 'foo')effect(() => {console.log('foo.value具有响应性:', foo.value)})</script></body>
</html><!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="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script></head><body><script>const { reactive, effect, toRef, toRefs } = Vue// obj是reactive创建的响应式数据(proxy代理对象)const obj = reactive({ foo: 1, bar: 2 })// 使用toRefs解构赋值 取代 {foo, bar} = objconst { foo, bar } = toRefs(obj)effect(() => {console.log('bar.value具有响应性', bar.value)})</script></body>
</html>2) toRef的实现
> 基本实现 >function toRef(obj, key) {const wrapper = {get value() {return obj[key]},set value(val) {obj[key] = val},}Object.defineProperty(wrapper, '__v_isRef', {value: true,})return wrapper
}
在Vue3中, 将wrapper抽象成了ObjectRefImpl类的实例, 大致的实现如下
class ObjectRefImpl {constructor(_obj, _key) {this._obj = _objthis._key = _keythis.__v_isRef = true}get value() {return this._obj[this._key]}set value(newVal) {this._obj[this._key] = newVal}
}function toRef(obj, key) {return new ObjectRefImpl(obj, key)
}源码解读
:::info
- 源码中的
toRef实现了默认值的功能 - 源码中的
toRef对要转换的数据做了判断, 如果已经是ref类型就直接返回
:::
class ObjectRefImpl {// 支持默认值constructor(_object, _key, _defaultValue) {this._object = _objectthis._key = _keythis._defaultValue = _defaultValuethis.__v_isRef = true}get value() {const val = this._object[this._key]return val === undefined ? this._defaultValue : val}set value(newVal) {this._object[this._key] = newVal}
}
// 1. 支持默认值
function toRef(object, key, defaultValue) {const val = object[key]// 2. 如果要转换的对象已经是ref类型, 直接返回// eg: state = reactive({foo: ref(1)}) state.foo已经是ref类型, 直接返回ref(1)return isRef(val) ? val : new ObjectRefImpl(object, key, defaultValue)
}
测试用例
<!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>// obj是响应式数据const obj = reactive({ foo: 1, bar: 2 })const foo = toRef(obj, 'foo')effect(() => {console.log('foo.value具备响应性:', foo.value)})</script></body>
</html>
3) toRefs的实现
> 基本实现 >function toRefs(obj) {const ret = {}for (const key in obj) {ret[key] = toRef(obj, key)}return ret
}
原码解读
:::info
- 源码中对
obj的类型做了判断- 如果不是
reactive类型的对象, 提示警告 - 支持代理是数组的情况
- 如果不是
:::
function toRefs(object) {// 如果传入的对象不具备响应性, 提示警告if (!isProxy(object)) {console.warn(`toRefs() expects a reactive object but received a plain one.`)}// 支持代理是数组的情况// - 对象的情况: toRefs(reactive({foo: 1, bar: 2})) => {foo: ref(1), bar: ref(2)}// - 数组的情况: toRefs(reactive(['foo', 'bar'])) => [ref('foo'), ref('bar')]const ret = isArray(object) ? new Array(object.length) : {}for (const key in object) {ret[key] = toRef(object, key)}return ret
}
测试用例
<!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>// obj是响应式数据const obj = reactive({ foo: 1, bar: 2 })// 解构赋值const { foo, bar } = toRefs(obj)effect(() => {console.log('foo.value具备响应性:', foo.value)})</script></body>
</html>
5 自动脱ref
1) 什么是自动脱ref
> 所谓自动脱ref, 就是不写`.value` >对于ref类型数据, 每次在访问时, 需要加.value才能触发响应式.
但是这样做无疑增加了心智负担, 尤其是在写模板时, 不够优雅
为此, Vue3提供一个API: proxyRefs
对传入的ref类型对象进行代理, 返回proxy对象
个人理解: 有点类似toRefs的逆操作??
2) 基本使用
> 使用演示 ><!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="./vue.js"></script></head><body><script>const { ref, proxyRefs, effect } = Vueconst count = ref(0)// 1.模拟setup的返回对象// setup函数返回的对象会经过proxyRefs处理// 这样在模板中就不用写.value了const setup = proxyRefs({count,})// 2.模拟页面渲染effect(() => {console.log('不用通过.value访问', setup.count)})</script></body>
</html>
3) proxyRefs的实现
> 基本实现 >function proxyRefs(objectWithRefs) {return new Proxy(objectWithRefs, {get(target, key, receiver) {// 使用Reflect读取target[key]const obj = Reflect.get(target, key, receiver)// 如果obj是ref类型, 返回obj.value; 否则, 直接返回return obj.__v_isRef ? obj.value : obj},set(target, key, newVal, receiver) {const obj = target[key]if (obj.__v_isRef) {obj.value = newValreturn obj}return Reflect.set(target, key, newVal, receiver)},})
}
源码解读
:::info
- 源码对传入参数加强了判断
- 如果objectWithRefs已经是
reactive类型, 就直接使用
- 如果objectWithRefs已经是
- 源码按功能进一步细化, 可读性更高
unref函数可以复用: 如果是ref返回.value; 否则直接返回- 将proxy的handler提取成
shallowUnwrapHandlers函数 - 在set时, 加入了新旧值类型的判断, 更严谨
:::
function unref(ref) {return isRef(ref) ? ref.value : ref
}
const shallowUnwrapHandlers = {get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),set: (target, key, value, receiver) => {const oldValue = target[key]if (isRef(oldValue) && !isRef(value)) {oldValue.value = valuereturn true} else {return Reflect.set(target, key, value, receiver)}},
}
function proxyRefs(objectWithRefs) {return isReactive(objectWithRefs)? objectWithRefs: new Proxy(objectWithRefs, shallowUnwrapHandlers)
}
6 改造
按照vue的源码进行改造function isObject(val) {return typeof val === 'object' && val !== null
}
function toReactive(value) {return isObject(value) ? reactive(value) : value
}
class RefImpl {constructor(value) {this.dep = new Set()this._rawValue = valuethis.__v_isRef = truethis._value = toReactive(value)}get value() {trackEffects(this.dep)return this._value}set value(newValue) {if (this._rawValue != newValue) {this._rawValue = newValuethis._value = toReactive(newValue)triggerEffects(this.dep)}}
}
function ref(val) {return new RefImpl(val)
}
：智能用户分群 - 融合行为)
