# Vue3 toRef 和 toRefs 函数

🚀 优质资源分享 🚀

Vue3 toRef 和 toRefs 函数

上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数，实现响应式数据，今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。

toRef 函数

通过上一篇博客，我们知道，ref 函数可以创建一个响应式的数据，那 toRef 函数同样也是创建一个响应式的数据，那么他们之间的区别是什么呢？

首先一点，ref 函数他的本质其实是去拷贝一份数据，脱离了与源数据的交互。什么意思呢？就是 ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新。但是 toRefs 函数的本质是引用，也就是说，toRef 函数会与源数据交互，修改响应式数据会造成源数据的修改，但是他的修改不会造成视图层数据的更新。

上面这段话理解吗？不理解的话没关系，下面通过几个案例就可以明白了。

toRef 函数使用

首先呢， toRef 函数有两个参数。

toRef(操作对象, 对象属性)

好，接下来我们使用 toRef 函数写一个案例，还是和以前一样，页面展示一个用户的名称和年纪。

 <div>
 <h1>toRef toRefs 函数h1>
 <p>姓名：{
  {boy\_toRef}}p>
 <p>年龄：{
  {boy.age}}p>
 div>

<script>
 import { toRef } from 'vue'
 export default {
 setup() {
 const boy = { // 创建一个用户对象
 name: '我是𝒆𝒅.', // 用户名称
 age: 10 // 用户年龄
 }
 // 使用 toRef 函数包裹，操作 boy 对象的 name 属性
 const boy\_toRef = toRef(boy, 'name') 
 console.log(boy\_toRef) // 我们直接打印看一下包裹后的数据格式
 return { boy, boy\_toRef }
 }
 }
script>

保存代码，刷新页面。

我们可以看到数据的结构，在 value 里面直接就是 boy 下面 name 的属性值，所以说，接下来我们编写一个按钮，点击按钮，修改这个 name 值。

 <div>
 <h1>toRef toRefs 函数h1>
 <p>姓名：{
  {boy\_toRef}}p>
 <p>年龄：{
  {boy.age}}p>
 <el-button type="primary" @click="btn">修改 nameel-button>
 div>

<script>
 import { toRef } from 'vue'
 export de