Vue3快速上手(八) toRefs和toRef的用法

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

Vue3快速上手(八) toRefs和toRef的用法,Vue,vue3,toRefs,toRef,vue.js
顾名思义,toRef 就是将其转换为ref的一种实现。详细请看:

一、toRef

1.1 示例

<script lang='ts' setup name="toRefsAndtoRef">
// 引入reactive,toRef
import { reactive, toRef } from 'vue'
// reactive包裹的数据即为响应式对象
let person = reactive(
    {
        name: "李四",
        age: 99
    }
)
function updatePerson() {
    let name = toRef(person, 'name')
    console.log(name);
    console.log(name.value);
    console.log(person.name);
    // 实际修改数据
    name.value += '@'
}

</script>

1.2 解释

toRef就相当于是将对象Person里的某个属性,如name,单独解构赋值给name,并使得name同为响应式对象。且修改name的值时,person.name的值随之变化。
如下图可以看到:
1、name是一个ObjectRefImpl对象的实例。
2、底层还是个Proxy(Object)
3、name的值和person.name的值是一起变化的。
Vue3快速上手(八) toRefs和toRef的用法,Vue,vue3,toRefs,toRef,vue.js

1.3 页面效果

Vue3快速上手(八) toRefs和toRef的用法,Vue,vue3,toRefs,toRef,vue.js

二、toRefs

理解了toRef之后,再理解toRefs就相当容易了。
无非是1和n的区别。

2.1 示例

<script lang='ts' setup name="toRefsAndtoRef">
// 引入reactive,toRefs
import { reactive, toRefs } from 'vue'
// reactive包裹的数据即为响应式对象
let person = reactive(
    {
        name: "李四",
        age: 99
    }
)
function updatePerson() {
    let {name, age} = toRefs(person)
    console.log(name);
    console.log(name.value, age.value);
    // 修改数据
    name.value += '@'
    age.value += 1
    console.log('name: ',name.value);
    console.log('person.name: ', person.name);
}

</script>

2.2 解释

toRefs就相当于是将对象Person里的所有属性,一起解构赋值给name,并使得name同为响应式对象。且修改name的值时,person.name的值随之变化。
如下图可以看到:
1、各个属性都是一个ObjectRefImpl对象的实例。
2、底层还是个Proxy(Object)
3、解构出的变量的值和对象里属性的值是一起变化的。
Vue3快速上手(八) toRefs和toRef的用法,Vue,vue3,toRefs,toRef,vue.js

2.3 页面效果

Vue3快速上手(八) toRefs和toRef的用法,Vue,vue3,toRefs,toRef,vue.js文章来源地址https://www.toymoban.com/news/detail-827447.html

END

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

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

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

相关文章

  • Vue3中 toRefs的基本使用

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

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

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

    2024年02月09日
    浏览(39)
  • 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日
    浏览(35)
  • 【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)

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

    2024年02月13日
    浏览(44)
  • 助你丝滑过度到 Vue3 生命&自定义hook&toRef ②⑥

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

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

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

    2023年04月19日
    浏览(52)
  • TypeScript快速上手语法+结合vue3用法

            前言:             本篇内容不涉及TypeScript安装以及配置,具体安装及配置篇可以看下面目录,本篇只涉及TypeScript语法相关内容,及结合vue3的用法。不讲废话,简单直接直接开撸。 目录      TypeScript的具体安装及配置  TypeScript快速上手语法+结合vue3用法 1、

    2024年02月03日
    浏览(36)
  • [GN] Vue3快速上手1

    Vue2 展示 官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create vue 3.0 作为组合式API setup执行很早,在beforeCreate之前执行一次。 Vue3.0中一个新的配置项 setup是所有 Composition API(组合API) 表演的舞台 ”。 组件中所用到的:数据、方法等等,均要配置在setup中。 注意点:

    2024年01月20日
    浏览(34)
  • [GN] Vue3.2 快速上手 ---- 核心语法2

    用在普通 DOM 标签上,获取的是 DOM 节点。 用在组件标签上,获取的是组件实例对象。 用在普通 DOM 标签上: 用在组件标签上: 父组件App使用子组件Person Person组件标签上使用ref 可以获取组件实例 但需要子组件代码中 使用defineExpose暴露内容 App.vue是父组件,Person是子组件 父

    2024年01月21日
    浏览(57)
  • Vue3快速上手(七) ref和reactive对比

    表格形式更加直观吧: 项目 ref reactive 是否支持基本类型 支持 不支持 是否支持对象类型 支持 支持 对象类型是否支持属性直接赋值 不支持,需要.value 支持 是否支持直接重新分配对象 支持,因为操作的.value 不支持,需要使用object.assign()方法 是否支持基本类型 支持 不支持

    2024年02月19日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包