vue3 toRefs详解

这篇具有很好参考价值的文章主要介绍了vue3 toRefs详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

toRefs函数的作用是将响应式对象中的所有属性转换为单独的响应式数据,对象成为普通对象,并且值是关联的。在这个过程中toRefs会做以下两件事:

  1. 把一个响应式对象转换成普通对象
  2. 对该普通对象的每个属性都做一次ref操作,这样每个属性都是响应式的
    说明:
  • reactive 对象取出的所有属性值都是非响应式的,而利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性。
  • reactive的响应式功能是赋值给对象,如果展开对象,会让数丢失响应的能力
  • 使用toRefs可以保证对象展开的每个属性都是响应式的

应用场景:

  • 展开响应式对象时,想使用响应式对象中的多个或者所有属性做为响应式数据。
  • 当函数返回响应式对象时,toRefs非常有用,这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用。-

示例:展开运算符

<template>
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <h2>地址:{{addr.province}}-{{addr.city}}</h2>
    <button @click="name='zhangsan'">修改名字</button>
</template>
<script lang='ts'>
    import { reactive } from 'vue'
    export default {
        setup() {
            const user = reactive<any>({
                name: '张三',
                age: 19,
                addr: {
                    province: '河南',
                    city: '郑州'
                }
            })
            return {
                ...user // 展开运算符
            }
        }
    }
</script>

注意:响应式对象的处理,是加给对象的,如果对对象做了展开操作,那么就会丢失响应式的效果。所以上面代码,单击button时,不能改变页面显示效果。

示例:

<template>
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <h2>地址:{{addr.province}}-{{addr.city}}</h2>
    <button @click="name='zhangsan'">修改名字</button>
</template>
<script lang='ts'>
    import { reactive, toRefs } from 'vue'
    export default {
        setup() {
            const user = reactive<any>({
                name: '张三',
                age: 19,
                addr: {
                    province: '河南',
                    city: '郑州'
                }
            })
            return {
                ...toRefs(user)
            }
        }
    }
</script>

本次单击按钮可以实现修改效果。文章来源地址https://www.toymoban.com/news/detail-650306.html

到了这里,关于vue3 toRefs详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3中 toRefs的基本使用

    什么是toRefs? 把一个响应式对象转换成普通对象,该普通对象的每个 property 都是一个 ref; 理解一下: 期望: 页面上展示 “小明=========…”; 实际:页面展示\\\"小明\\\",myData中name 无法响应。 解决: 通过toRefs的方式,将一个响应式 reactive 对象的所有原始属性转换为响应式的

    2024年02月11日
    浏览(34)
  • 【Vue3 知识第七讲】reactive、shallowReactive、toRef、toRefs 等系列方法应用与对比

    reactive() 函数用于返回一个对象的响应式代理 。与 ref() 函数定义响应式数据的异同点如下: 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 ref 函数和 reactive 函数都是用来定义响应式数据的。 ref 函数更适合定义基本数据类型(可接收基本数据

    2024年02月09日
    浏览(43)
  • Vue3技术6之toRef和toRefs、shallowReactive与shallowRef、readonly与shallowReadonly

    App.vue Demo.vue 原理: App.vue DemoTwo.vue 作用:创建一个ref对象,其value值指向另一个对象中的某个属性 语法: const name=toRef(person,‘name’) 应用:要将响应式对象中的某个属性单独提供给外部使用时 扩展: toRefs 与 toRef 功能一致,但可以批量创建多个ref 对象,语法: toRefs(perso

    2023年04月24日
    浏览(39)
  • 【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)

    写法一(vue3的写法) toRefs定义: toRefs可以将对象(只能接收rective对象)中的属性变成响应式。 正常reactive对象数据也是响应式的,如果用toRefs解构出去会更加方便。 toRefs什么时候用? 数据量如果很多, 我们一般会用解构来简化代码, 那么在vue3 中如果使用对象的解构,

    2024年02月13日
    浏览(49)
  • vue全家桶进阶之路31:Vue3 数据和方法的双向绑定ref、reactive、toRefs

    ref 在 Vue 3 中,你可以使用 setup 函数来定义组件的数据和方法。在 setup 函数中,你可以使用 ref 、 reactive 和 computed 等 Vue 3 的响应式 API 来定义数据,并返回一个包含你需要公开的数据和方法的对象。下面是一个例子: 在这个例子中,我们使用 ref 函数来定义了一个名为 mes

    2023年04月19日
    浏览(54)
  • 助你丝滑过度到 Vue3 生命&自定义hook&toRef ②⑥

    @作者 : SYFStrive   @博客首页 : HomePage 📜: VUE3~TS 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 专栏连接🔗 👉 TypeScript (🔥) 👉 微信小程序 (🔥) 👉 UNIAPP开发 (🔥) 提示:以下是本篇文章正文内容 简介 : 2020年9月

    2024年02月15日
    浏览(42)
  • Vue 2 和 Vue 3 中 toRefs的区别

    摘要:本文将介绍 Vue 2 和 Vue 3 中 toRefs 函数的不同用法和行为,并解释其在各个版本中的作用。 正文: Vue 是一款流行的 JavaScript 框架,用于构建用户界面。在 Vue 2 和 Vue 3 中,都存在一个名为 toRefs 的函数,但其行为在这两个版本中有所不同。 在 Vue 2 中,使用 Composition A

    2024年02月15日
    浏览(43)
  • ref、reactive、toRef、toRefs

    ref 作用:定义一个响应式数据 语法:const xxx = ref(initValue) 创建一个包含响应式数据的引用对象 js中操作数据:xxx.value 模板中读取数据:不需要.value,直接div{{xxx}}/div 接收的数据:基本类型、对象类型 基本类型的数据:响应式是靠object.defineProperty()的get与set完成的 对象类型的

    2024年02月08日
    浏览(46)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(64)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包