<script setup lang="ts">
import { reactive, toRefs} from "vue"
function useCount() {
const state = reactive({
count: 0,
})
function update(value: number) {
console.log('value :>> ', value);
state.count = value
}
return {
state: toRefs(state),
update,
}
}
// Ensure the destructured properties don't lose their reactivity
const { state: { count }, update } = useCount()
</script>
<template>
<div>
<p>
<span @click="update(count-1)">-</span>
{{ count }}
<span @click="update(count+1)">+</span>
</p>
</div>
</template>
toRefs是把一个响应式对象变成普通对象,这个对象每个属性都指向源对象相应属性的ref;
toRefs和toRef的作用一致,可以批量创建多个对象
const state = reactive({
foo: 1,
bar: 2,
})
const fooRef = toRefs(state).foo
// 等价于下面的
const fooRef = toRef(state,'foo')
<script setup lang="ts">
import { ref, Ref,isRef,unref,toRef, reactive } from "vue"
const initial = ref(10)
const count = ref(0)
// 挑战 1: 更新 ref
function update(value) {
// 实现...
count.value = value
}
/**
* 挑战 2: 检查`count`是否为一个 ref 对象
* 确保以下输出为1
*/
console.log(
// impl ? 1 : 0
isRef(count) ? 1 : 0
)
/**
* 挑战 3: 如果参数是一个 ref,则返回内部值,否则返回参数本身
* 确保以下输出为true
*/
function initialCount(value: number | Ref<number>) {
// 确保以下输出为true
console.log(unref(value) === 10)
}
initialCount(initial)
/**
* 挑战 4:
* 为源响应式对象上的某个 `property` 新创建一个 `ref`。
* 然后,`ref` 可以被传递,它会保持对其源`property`的响应式连接。
* 确保以下输出为true
*/
const state = reactive({
foo: 1,
bar: 2,
})
const fooRef = toRef(state,'foo') // 修改这里的实现...
// 修改引用将更新原引用
fooRef.value++
console.log(state.foo === 2)
// 修改原引用也会更新`ref`
state.foo++
console.log(fooRef.value === 3)
</script>
<template>
<div>
<h1>msg</h1>
<p>
<span @click="update(count - 1)">-</span>
{{ count }}
<span @click="update(count + 1)">+</span>
</p>
</div>
</template>
isRef检查某个值是否是ref;
toRef可以把一个响应式对象的属性也变成响应式,这样创建的ref与其源属性保持一致;
unRef是一个语法糖,如果参数是ref,返回它的内部值,否则返回它本身,相当于
val = isRef(val) ? val.value : val
shallowRef只有它的.value是响应式的,不会被深层递归地转为响应式。
const state = shallowRef({ count: 1 })
// 不会触发更改
state.value.count = 2
// 会触发更改
state.value = { count: 2 }
triggerRef是强制触发shallowRef的副作用。
<script setup lang="ts">
import { shallowRef, watch,triggerRef } from "vue"
const state = shallowRef({ count: 1 })
// Does NOT trigger
watch(state, () => {
console.log("State.count Updated")
}, { deep: true })
/**
* Modify the code so that we can make the watch callback trigger.
*/
state.value.count = 2
triggerRef(state) // 使用triggerRef触发shallowRef的副作用 ,打印State.count Updated
</script>
<template>
<div>
<p>
{{ state.count }}
</p>
</div>
</template>