vue中ref使用（【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 export default { name: App, setup() { const name = ref(初映) const updateName = () => { 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 export default { name: App, setup() { // 初始值是 null const data = ref(null) setTimeout(() => { // 右边的对象可能是后端返回的 data.value = { name: 初映, } }, 1000) const updateName = () => { 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 export default { name: App, setup() { const obj = reactive({ name: 初映, age: 18, address: 江西, sex: 男, }) const updateName = () => { 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 export default { name: App, setup() { const obj = reactive({ name: 初映, age: 18, address: 江西, sex: 男, }) const name = toRef(obj, name) const updateName = () => { 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 export default { name: App, setup() { const obj = reactive({ name: 初映, age: 10, }) const updateName = () => { obj.name = 初映CY的前说 obj.age = 18 } return { ...toRefs(obj), updateName } }, } </script>toRefs将我们所有的响应式数据都进行return出去了 ，届时直接用上数据名称即可 ，记得加上…喔
至此本文结束 ，愿你有所收获！
期待大家的关注与支持! 你的肯定是我更新的最大动力！！！创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！