Vue3里面的toRef和toRefs怎么用，和使用场景是啥

迷南。 2023-10-09 23:20 30阅读 0赞

![973762cc9d0347689b998c20c17dc3df.png][]`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`适合将一个响应式对象转换为普通对象以在非响应式的上下文中使用。

[973762cc9d0347689b998c20c17dc3df.png]: https://img-blog.csdnimg.cn/973762cc9d0347689b998c20c17dc3df.png