Vue3 理解 toRef 和 toRefs 的作用、用法、区别

原创

已于 2025-05-12 10:50:21 修改 · 3.6w 阅读

142 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2021-12-01 21:46:46 首次发布

本文详细介绍了Vue3中toRef和toRefs的作用，它们用于复制reactive属性并转化为ref，保持响应式与引用特性。通过实例演示了如何在模板中使用，以及在封装函数和避免重复声明上的应用价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toRef / toRefs

作用

toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref，而且它既保留了响应式，也保留了引用，也就是你从 reactive 复制过来的属性进行修改后，除了视图会更新，原有 ractive 里面对应的值也会跟着更新，如果你知道 浅拷贝 的话那么这个引用就很好理解了，它复制的其实就是引用 + 响应式 ref
不加 s 和加 s 的区别就是这样：

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

下面我会为这两个属性举一些使用案例

使用方式

toRef

<template>
  <h2>
    reactive-greet: {
   
   {
   
    info.greet }} 
  </h2>
  <h2>
    toRef-greet: {
   
   {
   
    rGreet }}
  </h2>
  <button @click="onChangeGreet">更换问候语</button>
</template>

<script>
import {
   
    reactive, toRef } from 'vue'
export default {
   
   
	setup() {
   
   
    let info = reactive(<