dj
7fc2292d4b
- 实现了 ref 函数用于创建响应式引用 - 添加了 RefImpl 类来管理引用值的响应式行为 - 集成了 trackRefValue 函数进行依赖追踪 - 扩展了 vue 包的导出以包含 ref 功能 - 在 shared 包中添加了 isObject 工具函数 - 创建了 toReactive 辅助函数用于对象响应式转换 - 新增 ref.html 示例文件展示 ref 使用方法 - 移除了旧的 reactive-test.html 示例文件
43 lines
967 B
TypeScript
43 lines
967 B
TypeScript
import { createDep, Dep } from './dep'
|
|
import { toReactive } from './reactive'
|
|
import { activeEffect, track, trackEffects } from './effect'
|
|
|
|
export interface Ref<T = any> {
|
|
value: T
|
|
}
|
|
|
|
export function ref(value?: unknown) {
|
|
return createRef(value, false)
|
|
}
|
|
function createRef(rawValue: unknown, shallow: boolean) {
|
|
if (isRef(rawValue)) {
|
|
return rawValue
|
|
}
|
|
return new RefImpl(rawValue, shallow)
|
|
}
|
|
class RefImpl<T> {
|
|
private _value: T
|
|
public dep?: Dep = undefined
|
|
public readonly __v_isRef = true
|
|
constructor(
|
|
value: T,
|
|
public readonly __v_isShallow: boolean
|
|
) {
|
|
this._value = __v_isShallow ? value : toReactive(value)
|
|
}
|
|
get value() {
|
|
trackRefValue(this)
|
|
return this._value
|
|
}
|
|
set value(newValue) {}
|
|
}
|
|
export function trackRefValue(ref) {
|
|
if (activeEffect) {
|
|
trackEffects(ref.dep || (ref.dep = createDep()))
|
|
}
|
|
}
|
|
//是否为ref
|
|
export function isRef(r: any): r is Ref {
|
|
return !!(r && r.__v_isRef === true)
|
|
}
|