目录 toRef 函数 toRef 函数使用 ref 函数验证 toRefs 函数 toRefs 函数使用 总结 上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数，实现响应式数据，今天主要来说一下 toRef 函数和 toRefs
目录
- toRef 函数
- toRef 函数使用
- ref 函数验证
- toRefs 函数
- toRefs 函数使用
- 总结
上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数，实现响应式数据，今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。
toRef 函数
通过上一篇博客，我们知道，ref 函数可以创建一个响应式的数据，那 toRef 函数同样也是创建一个响应式的数据，那么他们之间的区别是什么呢？
首先一点，ref 函数他的本质其实是去拷贝一份数据，脱离了与源数据的交互。什么意思呢？就是 ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新。但是 toRefs 函数的本质是引用，也就是说，toRef 函数会与源数据交互，修改响应式数据会造成源数据的修改，但是他的修改不会造成视图层数据的更新。
上面这段话理解吗？不理解的话没关系，下面通过几个案例就可以明白了。
toRef 函数使用
首先呢， toRef 函数有两个参数。
toRef(操作对象, 对象属性)
好，接下来我们使用 toRef 函数写一个案例，还是和以前一样，页面展示一个用户的名称和年纪。
<template>
<div>
<h1>toRef toRefs 函数</h1>
<p>姓名：{{boy_toRef}}</p>
<p>年龄：{{boy.age}}</p>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = { // 创建一个用户对象
name: '我是