Vue3之toRefs和toRef在reactive中的一些应用方式

更新时间：2024年03月18日 10:06:27 作者：小馒头学python

这篇文章主要介绍了Vue3之toRefs和toRef在reactive中的一些应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

回顾响应式对象

在介绍知识点之前，我们准备好初始代码

<template>
<h2>姓名：{{ person.name }}</h2>
<h2>姓名：{{ person.age }}</h2>
<button @click="change_name">修改名字</button>
<button @click="change_age"></button>
 </template>
 
 <script lang="ts" setup name="Person11">
  import {reactive} from 'vue'
  
 let person = reactive({
  name:'馒头',
  age:22
 })
 function change_name(){
  person.name += '*'
 }

 function change_age(){
  person.age += 1
 }

 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

运行结果如下

请添加图片描述

是否和你想的一样呢，我们使用了reactive进行创建响应式对象

接下来我们对person进行解构赋值

或许有些人不太理解解构赋值，我从网上找了一段话

解构赋值是 JavaScript 中一种方便的语法，用于从数组或对象中提取数据并赋值给变量。通过解构赋值，可以轻松地提取数组中的元素或对象中的属性，使代码更简洁易读。
它还可以嵌套使用，处理复杂的数据结构，但要注意避免过度解构，以保持代码的可读性。

接下来我们看看代码中如何操作，只需在数据下面加一行

let {name,age} = person

接下来我们修改方法中的部分代码

//原代码
function change_name(){
          person.name += '*'
        }

        function change_age(){
          person.age += 1
        }
//修改之后的代码
function change_name(){
          name += '*'
        }

        function change_age(){
          age += 1
        }

这样我们的页面是否还会响应呢，答案是不可以

请添加图片描述

如果我们再修改模板里面的内容呢

<h2>姓名：{{ name }}</h2>
<h2>姓名：{{ age }}</h2>

答案也是不更新的，但是数据究竟改没改呢，我们打印一下

function change_name(){
          name += '*'
          console.log(name)
        }

        function change_age(){
          age += 1
          console.log(age)
        }

控制台结果显示如下，所以说是改了的

接下来我们解释一下

let {name,age} = person

上面这行代码和下面两行代码其实是等价的

let name=person.name
let age=person.age

同时我们要明确一点，下图的数据是响应式的

但是我们解构后相当于自己重新定义了一个对象name和age，然后person.name和person.age是不变的

多说无益，我们测试一下叭

function change_name(){
          name += '*'
          console.log(name, person.name)
        }

结果显然了叭，结论就是：响应式对象解构出的并非是响应式对象

介绍toRefs

承接上个标题，我们如果想要将解构的对象变为响应式的，我们应该怎么做呢，只需要import一个toRefs

import {reactive,toRefs} from 'vue'

同时我们再将解构的person包裹一下toRefs

let {name,age} = toRefs(person)

这样的意思就是，将解构的数据变为Ref定义的响应式对象，将reactive对象变为Ref对象

接下来我们改一下方法

function change_name(){
          name.value += '*'
          console.log(name, person.name)
        }

        function change_age(){
          age.value += 1
          console.log(age)
        }

这样我们再测试一下

请添加图片描述

介绍toRef（不常用）

toRef和toRefs是 Vue3 中用于处理响应式对象的两个函数，它们有一些重要的区别：

toRef：

参数：接收一个响应式对象和一个属性名，返回一个 ref 对象，指向该属性的值。
用途：主要用于将单个属性转换为 ref 对象，使得该属性的值能够被响应式地跟踪。

toRefs：

参数：接收一个响应式对象，返回一个包含该对象所有属性的 ref 对象。
用途：常用于在组件中将 props 转换为响应式对象，或者在 setup 函数中处理响应式对象的多个属性。

总的来说，toRef用于处理单个属性，将其转换为 ref 对象，而toRefs用于处理整个对象，将对象的所有属性都转换为 ref 对象

总结

本节介绍了一下toRefs和toRef，同时回忆了一下reactive

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue-element-admin平台侧边栏收缩控制问题
这篇文章主要介绍了Vue-element-admin平台侧边栏收缩控制问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue监听屏幕尺寸变化问题,window.onresize很简单
这篇文章主要介绍了vue监听屏幕尺寸变化问题,window.onresize很简单,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
对vux点击事件的优化详解
今天小编就为大家分享一篇对vux点击事件的优化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue中使用echarts以及简单关系图的点击事件方式
这篇文章主要介绍了vue中使用echarts以及简单关系图的点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue3父组件和子组件如何传值实例详解
近期学习vue3的父子组件之间的传值,发现跟vue2.x的父子组件之间的传值并没有太大的区别,下面这篇文章主要给大家介绍了关于vue3父组件和子组件如何传值的相关资料,需要的朋友可以参考下
2022-08-08
vue3 mixin 混入使用方法
这篇文章主要介绍了 vue3 mixin 混入使用方法，mixin 混入，提供了一种非常灵活的方式，来分发 vue 组件中的可复用功能，一个mixin 对象可以包含任意组件选项，当组件使用 mixin 对象时，所有的 mixin 对象的选项将被混入组件本身的选项。,需要的朋友可以参考一下
2021-11-11
解决vue app.js/vender.js过大优化启动页
这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
项目nginx部署到非根目录下vue配置方案
这篇文章主要介绍了项目nginx部署到非根目录下vue配置方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
vue+element遇到的坑及解决
这篇文章主要介绍了vue+element遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue3封装Element导航菜单的实例代码
这篇文章主要介绍了vue3封装Element导航菜单的实例代码,分为菜单数据格式示例,控制导航收缩的详细代码,本文通过实例代码介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-03-03