toRef
和toRefs
是Vue3中新增的API,主要用于将响应式对象中的某个属性变成一个单独的响应式引用,以及将整个响应式对象转化为普通对象,并将其属性变成响应式引用。
使用toRef
,我们可以创建一个单独的响应式引用,并保持引用与原始对象属性的响应式关联,这样当原始对象属性的值发生变化时,引用的值也会相应地更新。
使用toRefs
,我们可以将一个响应式对象转换为普通对象,并将所有属性都变成响应式引用,这样我们就可以在一个非响应式的上下文(比如组件的template)中使用这些属性,而不需要通过setup()
暴露整个响应式对象。
下面是它们的具体用法:
toRef
import { reactive, toRef } from 'vue'
const state = reactive({
name: '张三',
age: 20
})
const nameRef = toRef(state, 'name')
console.log(nameRef.value) // '张三'
state.name = '李四'
console.log(nameRef.value) // '李四'
在上面的例子中,我们使用toRef
创建了一个名为nameRef
的响应式引用,它是state.name
的引用。当state.name
的值发生变化时,nameRef.value
的值也会相应地更新。
toRefs
import { reactive, toRefs } from 'vue'
const state = reactive({
name: '张三',
age: 20
})
const object = toRefs(state)
console.log(object.value.name) // '张三'
console.log(object.value.age) // 20
在上面的例子中,我们使用toRefs
将state
对象转化为普通对象并将其属性变成响应式引用。这个操作返回的是一个新对象,我们可以通过value
属性访问它的属性。
总的来说,toRef
适合将响应式对象中的某个属性变成一个单独的响应式引用,比如将computed
属性的依赖转化为响应式引用;而toRefs
适合将一个响应式对象转换为普通对象以在非响应式的上下文中使用。