响应式类型
Ref
响应式引用类型。
ts
interface Ref<T = any, S = T> {
readonly [IS_REF]: true
get value(): T
set value(value: S)
}说明:Ref 是响应式引用的核心类型,通过 .value 属性访问和修改值。
参考:ref()
ShallowRef
浅层响应式引用类型。
ts
interface ShallowRef<T = any> extends Ref<T> {
readonly [IS_REF]: true
}说明:只有 .value 的替换是响应式的,不会深层追踪。
参考:shallowRef()
Reactive
响应式对象类型。
ts
type Reactive<T extends object = object> = DeepUnwrapRefs<T> & {
readonly [RAW_VALUE]: T
readonly [IS_REACTIVE]: ReactiveSource<T>
}说明:深层响应式代理对象,所有嵌套属性都是响应式的。
参考:reactive()
ShallowReactive
浅层响应式对象类型。
ts
type ShallowReactive<T extends object = object> = UnwrapRefs<T> & {
readonly [RAW_VALUE]: T
readonly [IS_REACTIVE]: ReactiveSource<T>
}说明:只有根级属性是响应式的。
ComputedRef
计算属性类型。
ts
interface Computed<T = any> extends Ref<T> {
readonly dirty: boolean
notify(): this
dispose(): void
}属性:
| 属性 | 类型 | 说明 |
|---|---|---|
dirty | boolean | 是否需要重新计算 |
value | T | 当前计算值(只读) |
方法:
| 方法 | 说明 |
|---|---|
notify() | 标记为脏值,强制下次访问时重新计算 |
dispose() | 销毁计算属性,释放依赖 |
参考:computed()
WatchSource
监听器数据源类型。
ts
type WatchSource<T> = Ref<T, any> | (() => T) | (T extends object ? T : never)说明:可以是 ref、getter 函数或 reactive 对象。
WatchCallback
监听器回调类型。
ts
type WatchCallback<T> = (newValue: T, oldValue: T, onCleanup: WatcherOnCleanup) => void参数:
| 参数 | 类型 | 说明 |
|---|---|---|
newValue | T | 新值 |
oldValue | T | 旧值 |
onCleanup | WatcherOnCleanup | 清理副作用注册函数 |
WatcherOnCleanup
监听器清理函数类型。
ts
type WatcherOnCleanup = (cleanupFn: VoidCallback) => voidWatchOptions
监听器选项类型。
ts
interface WatchOptions extends WatcherOptions {
immediate?: boolean
deep?: boolean | number
once?: boolean
}
interface WatcherOptions extends DebuggerOptions {
scope?: EffectScope | boolean
flush?: FlushMode
}属性:
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
immediate | boolean | false | 是否立即执行回调 |
deep | boolean | number | false | 是否深度监听 |
once | boolean | false | 是否只监听一次 |
flush | FlushMode | 'main' | 回调执行时机 |
scope | EffectScope | boolean | — | 指定作用域 |
FlushMode
调度模式类型。
ts
type FlushMode = 'pre' | 'main' | 'post' | 'sync'| 值 | 说明 |
|---|---|
'pre' | 组件更新前 |
'main' | 组件更新中(默认) |
'post' | DOM 更新后 |
'sync' | 同步执行 |
EffectScopeOptions
作用域选项类型。
ts
interface EffectScopeOptions {
name?: string | symbol
errorHandler?: EffectScopeErrorHandler
}属性:
| 属性 | 类型 | 说明 |
|---|---|---|
name | string | symbol | 作用域名称 |
errorHandler | (error, source) => void | 错误处理器 |
ToRef
属性转 ref 的类型映射。
ts
type ToRef<T> = T extends Ref ? T : Ref<T>UnwrapRef
ref 解包类型。
ts
type UnwrapRef<T> = T extends Ref<infer V, any> ? V : TUnwrapRefs
批量 ref 解包类型。
ts
type UnwrapRefs<T> = { [K in keyof T]: UnwrapRef<T[K]> }DeepUnwrapRefs
深层 ref 解包类型。
ts
type DeepUnwrapRefs<T> = { [K in keyof T]: DeepUnwrapRef<T[K]> }