响应式：核心

ref()

创建一个响应式引用。

类型定义

ts
declare function ref<T>(value: T): Ref<T>
declare function ref<T = undefined>(): Ref<T | undefined>

参数

参数类型说明
valueT可选，初始值

返回值

类型说明
Ref<T>响应式引用对象，通过 .value 读写

示例

ts
import { ref } from 'vitarx'

const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1

INFO

在 JSX 模板中使用 ref 时，无需手动访问 .value，框架会自动解包。

参考：ref 详解

shallowRef()

创建一个浅层响应式引用，只有 .value 的替换是响应式的，不会深层追踪。

类型定义

ts
declare function shallowRef<T>(value: T): ShallowRef<T>
declare function shallowRef<T = undefined>(): ShallowRef<T | undefined>

参数

参数类型说明
valueT可选，初始值

返回值

类型说明
ShallowRef<T>浅层响应式引用

示例

ts
import { shallowRef } from 'vitarx'

const state = shallowRef({ count: 0 })
state.value.count++ // 不会触发更新
state.value = { count: 1 } // 触发更新

reactive()

创建一个深层响应式对象。

类型定义

ts
declare function reactive<T extends object>(target: T): Reactive<T>

参数

参数类型说明
targetT extends object要转换为响应式的对象

返回值

类型说明
Reactive<T>响应式代理对象

示例

ts
import { reactive } from 'vitarx'

const state = reactive({ count: 0, name: 'Vitarx' })
state.count++ // 响应式更新

参考：reactive 详解

shallowReactive()

创建一个浅层响应式对象，只有根级属性是响应式的。

类型定义

ts
declare function shallowReactive<T extends object>(target: T): ShallowReactive<T>

参数

参数类型说明
targetT extends object要转换的对象

返回值

类型说明
ShallowReactive<T>浅层响应式代理对象

示例

ts
import { shallowReactive } from 'vitarx'

const state = shallowReactive({ nested: { count: 0 } })
state.nested.count++ // 不会触发更新
state.nested = { count: 1 } // 触发更新

computed()

创建一个计算属性。

类型定义

ts
declare function computed<T>(getter: (oldValue: T | undefined) => T): Computed<T>
declare function computed<T>(options: {
  get: (oldValue: T | undefined) => T
  set: (value: T) => void
}): Computed<T>

参数

参数类型说明
getter(oldValue?: T) => T计算函数
options{ get, set }包含 getter 和 setter 的对象

返回值

类型说明
Computed<T>计算属性对象

示例

只读计算属性：

ts
import { ref, computed } from 'vitarx'

const count = ref(0)
const double = computed(() => count.value * 2)

可写计算属性：

ts
const fullName = computed({
  get: () => firstName.value + ' ' + lastName.value,
  set: (val) => {
    const [first, last] = val.split(' ')
    firstName.value = first
    lastName.value = last
  }
})

Computed 实例方法

方法说明
notify()标记为脏值，强制重新计算
dispose()销毁计算属性

INFO

计算属性采用懒计算策略，只有在访问 .value 时才会执行计算。notify() 可用于在非响应式依赖变化时手动触发重新计算。

参考：computed 详解

readonly()

创建一个深层只读的响应式代理。

类型定义

ts
declare function readonly<T extends object>(target: T, deep?: boolean): ReadonlyObject<T, true>

参数

参数类型说明
targetT extends object要转换为只读的对象
deepboolean是否深层只读，默认 true

返回值

类型说明
ReadonlyObject<T>只读响应式代理对象

示例

ts
import { readonly, reactive } from 'vitarx'

const state = reactive({ count: 0 })
const readOnlyState = readonly(state)
readOnlyState.count // 可读取
readOnlyState.count++ // 警告：只读属性不能修改

参考：readonly 详解

shallowReadonly()

创建一个浅层只读的响应式代理，只有根级属性是只读的。

类型定义

ts
declare function shallowReadonly<T extends object>(target: T): ReadonlyObject<T, false>

参数

参数类型说明
targetT extends object要转换的对象

返回值

类型说明
ReadonlyObject<T, false>浅层只读代理对象

示例

ts
import { shallowReadonly, reactive } from 'vitarx'

const state = shallowReadonly({ nested: { count: 0 } })
state.nested.count++ // 允许修改（非根级属性）
state.nested = {} // 警告：只读属性不能修改