第五章 手写ref函数
目录
1.ref基本实现
2.toRef基本实现
3.toRefs基本实现
4.proxyRefs基本实现
1.ref基本实现
ref函数接收一个一个值，如果这个值是基础数据类型，则直接返回一个RefImpl对象，并对这个对象设置属性访问器和属性修改器，在其中进行对应的依赖收集和触发更新
如果接受一个复杂类型的数据，则会将数据包装成一个RefImpl对象，并将其value值通过reactive进行代理，最后设置给RefImpl对象。
1. 创建ref.ts 文件，在文件中导出一个函数ref,并在index。ts中统一导出
# ref.ts
export function ref(value) {
return createRef(value) // 创建一个Ref对象并返回
}
2. 实现createRef函数
function createRef(value) {
return new RefImpl(value)
}
class RefImpl {
__v_isRef = true // 标识当前变量是否是ref对象
_value // 存储ref对象的值
dep = [] // 用于收集依赖
constructor(public rawValue) {
// 判断是否是对象，如果是对象则递归ref
this._value = toReactive(rawValue) // 将对对象代理，将普通值原封不动返回
}
get value() {
return this._value // 返回ref对象的值
}
set value(newValue) {
if(newValue !== this._value) {
this._value = newValue // 更新ref对象的值
this.rawValue = newValue // 更新ref对象的原始值
}
}
}# reactive.ts
export function toReactive(value) {
return isObject(value) ? reactive(value) : value
}
```3. 收集依赖并触发更新
# ref.ts
import { currentEffect, trackEffect, triggerEffect } from "./effect"
import { toReactive } from "./reactive"
import { createDep } from "./reactiveEffect"
class RefImpl {
...
get value() {
...
trackrRefValue(this) // 收集依赖
...
}
set value(newValue) {
...
triggerRefValue(this) // 触发依赖
}
}
function trackrRefValue(ref) {
// 判断当前需要收集的依赖是否存在
if(currentEffect) {
// 收集依赖，并创建一个以当前ref为key的依赖表
trackEffect(currentEffect,ref.dep = createDep(() => ref.dep = undefined,"undefined"))
}
}
function triggerRefValue(ref) {
// 触发更新
let dep = ref.dep // 提取当前ref的依赖表
if(dep) {
triggerEffect(dep) // 触发依赖表
}
}2.toRef基本实现
在我们书写代码时，有可能会遇到下面这种状况
const user = reactive({
name: "zhangsan",
age: 18
})
const { name,age } = user如上，我们对一个reactive响应式对象进行了结构，这个操作在本质上会破坏proxy对象的代理，让响应式对象失去响应式特性，因此就有了toRef函数，专门用于将reactive对象中的某个属性结构出来并转换成ref对象。
该函数需要接受两个参数，第一个参数是reactive对象，第二个参数是reactive对象的属性key。返回一个ref对象，该对象的value属性就是reactive对象中key对应的值。并且支持响应式
1. 创建toRef函数
# ref.ts
export function toRef(reactive,key) {
return new ObjectRefImpl(reactive,key)
}2. 实现ObjectRefImpl类
class ObjectRefImpl {
__v_isRef = true // 标识当前变量是否是ref对象
constructor(public _object, public _key) {
}
get value() {
return this._object[this._key] // 返回对象的值
}
set value(newValue) {
this._object[this._key] = newValue // 更新对象的值
}
}3.toRefs基本实现
toRefs函数用于将reactive对象中的所有属性都转换成ref对象，并且返回一个包含所有ref对象的proxy对象。
1. 创建toRefs函数
export function toRefs(reactive) {
const res = {}
for(const key in reactive) {
res[key] = toRef(reactive, key)
}
return res
}4.proxyRefs基本实现
这个api主要用于在模板渲染时将所有的ref对象都代理成Proxy，在每次读取ref对象的属性值时，直接将其的value属性返回，这样在每次使用时就不需要再.value调用了。
1. 创建proxyRefs函数
export function proxyRefs(objectWithRefs) {
return new Proxy(objectWithRefs, {
get(target,key,receiver) {
let r = Reflect.get(target,key,receiver)
return r.__v_isRef ? r.value : r // 自动将value去掉包裹
},
set(target,key,value,receiver) {
const oldValue = target[key]
// 如果oldValue是ref对象，则更新ref对象的值
if(oldValue && oldValue.__v_isRef) {
oldValue.value = value // 更新ref对象的值
return true
} else {
// 如果oldValue不是ref对象，则更新对象的值
return Reflect.set(target,key,value,receiver) // 更新对象
}
}
})
}