作者：紫猫1_696_267 | 来源：互联网 | 2023-09-18 09:56
# Refs
本节例子中代码使用的单文件组件语法
# ref
接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。
示例：
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
如果将对象分配为 ref 值，则可以通过 reactive 方法使该对象具有高度的响应式。
类型声明：
interface Ref<T> {
value: T
}
function ref<T>(value: T): Ref<T>
有时我们可能需要为 ref 的内部值指定复杂类型。我们可以通过在调用 ref 来覆盖默认推断时传递一个泛型参数来简洁地做到这一点：
const foo = ref<string | number>('foo') // foo's type: Ref
foo.value = 123 // ok!
如果泛型的类型未知，建议将 ref 转换为 Ref：
function useState<State extends string>(initial: State) {
const state = ref(initial) as Ref<State> // state.value -> State extends string
return state
}
# unref
如果参数为 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val。
function useFoo(x: number | Ref<number>) {
const unwrapped = unref(x) // unwrapped 确保现在是数字类型
}
# toRef
可以用来为源响应式对象上的 property 新创建一个 ref。然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3
当您要将 prop 的 ref 传递给复合函数时，toRef 很有用：
export default {
setup(props) {
useSomeFeature(toRef(props, 'foo'))
}
}
toRef will return a usable ref even if the source property doesn't currently exist. This makes it especially useful when working with optional props, which wouldn't be picked up by toRefs.
# toRefs
将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref。
const state = reactive({
foo: 1,
bar: 2
})
const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:
{
foo: Ref,
bar: Ref
}
*/
// ref 和 原始property “链接”
state.foo++
console.log(stateAsRefs.foo.value) // 2
stateAsRefs.foo.value++
console.log(state.foo) // 3
当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散：
function useFeatureX() {
const state = reactive({
foo: 1,
bar: 2
})
// 逻辑运行状态
// 返回时转换为ref
return toRefs(state)
}
export default {
setup() {
// 可以在不失去响应性的情况下解构
const { foo, bar } = useFeatureX()
return {
foo,
bar
}
}
}
toRefs will only generate refs for properties that are included in the source object. To create a ref for a specific property use toRef instead.
# isRef
Checks if a value is a ref object。
# customRef
创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并应返回一个带有 get 和 set 的对象。
Typing：
function customRef<T>(factory: CustomRefFactory<T>): Ref<T>
type CustomRefFactory<T> = (
track: () => void,
trigger: () => void
) => {
get: () => T
set: (value: T) => void
}
# shallowRef
创建一个 ref，它跟踪自己的 .value 更改，但不会使其值成为响应式的。
const foo = shallowRef({})
// 改变 ref 的值是响应式的
foo.value = {}
// 但是这个值不会被转换。
isReactive(foo.value) // false
参考：正在将独立的响应式值创建为 refs
# triggerRef
手动执行与 shallowRef 关联的任何副作用。
const shallow = shallowRef({
greet: 'Hello, world'
})
// 第一次运行时记录一次 "Hello, world"
watchEffect(() => {
console.log(shallow.value.greet)
})
// 这不会触发副作用，因为 ref 是浅层的
shallow.value.greet = 'Hello, universe'
// 记录 "Hello, universe"
triggerRef(shallow)
参考计算和侦听 - watchEffect
京公网安备 11010802041100号