【vue3】关于ref、toRef、toRefs那些事

😉博主：初映CY的前说(前端领域) 📒本文核心：ref、toRef、toRefs的使用方法

【前言】我们在上一节的学习当中，使用了reactive()函数将vue3中的数据变成响应式的数据，本文中所讲的三个方法也能实现将数据转化为响应式数据。话不多说,让我们来学习下这三个方法怎么用，以及与reactive的区别。

目录

⭐一、ref

ref 函数，可以把简单数据类型包裹为响应式数据（复杂类型也可以），注意 JS 中操作值的时候，需要加 .value 属性，模板中正常使用即可。
举个例子：

• ref包装基本类型数据 App.vue

<template><div class="container"><div>{{ name }}</div><button @click="updateName">修改数据</button></div></template><script>import{ ref }from'vue'exportdefault{name:'App',setup(){const name =ref('初映')constupdateName=()=>{
              name.value ='初映CY的前说'}return{ name, updateName }},}</script>

可看见写法与reactive()一样，不过是在js中书写的时候需要额外加一个.value即可

• ref包装复杂类类型数据 注意：ref 其实也可以包裹复杂数据类型为响应式数据，一般对于数据类型未确定的情况下推荐使用 ref，例如后端返回的数据。

<template><div class="container"><div>{{ data?.name }}</div><button @click="updateName">修改数据</button></div></template><script>import{ ref }from'vue'exportdefault{name:'App',setup(){// 初始值是 nullconst data =ref(null)setTimeout(()=>{// 右边的对象可能是后端返回的
                data.value ={name:'初映',}},1000)constupdateName=()=>{
                data.value.name ='CY'}return{ data, updateName }},}</script>

• 如何选择？ ref()和reactive()都是Vue.js3.0中提供的两个响应式API。 ref()主要用于创建一个响应式数据，它会将一个普通的JavaScript对象转换为一个响应式的对象，从而使数据的变化可以被Vue实例所追踪，当数据发生变化时，Vue会自动更新相关视图。ref()创建的响应式数据可以通过.value属性来访问和修改。 reactive()则主要用于创建一个响应式对象，可以用作包含多个值的状态对象，通常用于管理复杂的状态。它可以将一个普通的JavaScript对象转换为一个响应式对象，并且支持嵌套属性，即使嵌套属性发生变化也会被Vue实例所追踪。当响应式对象中有任何一个属性发生变化时，Vue也会自动更新相关的视图。 当你明确知道需要包裹的是一个对象，那么推荐使用 reactive，其他情况使用 ref 即可。 Vue3.2 之后，更推荐使用 ref，性能得到了很大的提升。

⭐二、toRef

toRef 函数的作用：转换响应式对象中某个属性为单独响应式数据，并且转换后的值和之前是关联的（ref 函数也可以转换，但值非关联）。
先看下面这个例子：

<template><div class="container"><h2>name:{{ obj.name }} age:{{obj.age}}</h2><button @click="updateName">修改数据</button></div></template><script>import{ reactive }from'vue'exportdefault{name:'App',setup(){const obj =reactive({name:'初映',age:18,address:'江西',sex:'男',})constupdateName=()=>{
              obj.name ='初映CY的前说'}return{ obj, updateName }},}</script>

这样写也可以将数据进行更改成为响应式的数据，但是带来了两个问题：

• 问题 1：模板中都要使用 obj. 进行获取数据，麻烦。
• 问题 2：明明模板中只用到了 name 和 age，却把整个 obj 进行了导出，没必要，性能浪费。

<template><div class="container"><h2>name:{{ name }}</h2><button @click="updateName">修改数据</button></div></template><script>import{ reactive,toRef  }from'vue'exportdefault{name:'App',setup(){const obj =reactive({name:'初映',age:18,address:'江西',sex:'男',})const name =toRef(obj,'name')constupdateName=()=>{
              obj.name ='初映CY的前说'}return{ name, updateName }},}</script>

这样把我们需要的数据放进return即可，节约了性能与在模板中的写法，有点点了‘按需导入’的意思

⭐三、torefs

toRefs 函数的作用：转换响应式对象中所有属性为单独响应式数据，并且转换后的值和之前是关联的。

<template><div class="container"><h2>{{ name }}{{ age }}</h2><button @click="updateName">修改数据</button></div></template><script>import{ reactive, toRefs }from'vue'exportdefault{name:'App',setup(){const obj =reactive({name:'初映',age:10,})constupdateName=()=>{
              obj.name ='初映CY的前说'
              obj.age =18}return{...toRefs(obj), updateName }},}</script>

toRefs将我们所有的响应式数据都进行return出去了，届时直接用上数据名称即可，记得加上…喔

至此本文结束，愿你有所收获！
期待大家的关注与支持! 你的肯定是我更新的最大动力！！！