首页 > 其他分享 >Vue3主要的响应类方法(ref、reactive、toRef、toRefs)

Vue3主要的响应类方法(ref、reactive、toRef、toRefs)

时间:2023-07-07 11:11:43浏览次数:38  
标签:响应 对象 ref toRefs toRef reactive 添加 原始数据

1.Vue.ref()

1.1.可以为单个属性添加响应式状态。
1.2.可以为对象添加响应式状态,当给对象的某个属性单独ref后,改变后的属性值不会同时改变原始值。
1.3.访问数据值,需要添加.value。
1.4.原始数据的拷贝。(原始数据不被改变)

2.Vue.reactive()

2.1.给对象添加响应式状态
2.2.访问数据值,不需要添加.value。

2.3.原始数据的拷贝。(原始数据不被改变)

3.Vue.toRef()

主要为对象添加单个响应式属性

3.1.可以接收响应对象,为响应对象上的属性新建单个响应式ref,保持对其源对象属性的响应式连接。
3.2.可以接收非响应对象(普通对象),对单个属性添加响应式ref。但是这个响应式ref的改变不会更新界面。
3.3.访问数据值,需要添加.value。

3.4.roRef后的ref数据不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据。

4.Vue.roRefs()

4.1.只接收响应式对象,否则发出警告。
4.2.将原响应对象转换为普通对象,可解构,但不丢失响应式。
4.3.可以将reactive方法返回的响应式数据给toRefs(),再来进行解构。
4.4.访问数据值,需要添加.value。
4.5.toRefs后的ref数据不是原始数据的拷贝,是引用,改变结果数据的值也会同时改变原始数据。

 

总结:目前用得最多的还是使用ref和reactive来创建响应式对象,使用toRefs来转换成可以方便使用的解构的对象。

标签:响应,对象,ref,toRefs,toRef,reactive,添加,原始数据
From: https://www.cnblogs.com/pwindy/p/17534160.html

相关文章

  • Vue 3.0 reactive/effect
    reactive.js:import{isObject}from"../utils";import{track,trigger}from"./effect";exportfunctionreactive(target){//判断target类型//如果是基本类型,则不将其转化成响应式if(!isObject(target))returntarget;constproxy......
  • Vue3 reactive 操作数组 响应性(数组变了,但页面显示没变)问题
    问题代码:tableTemplates:Array<HkTaskTemplateEntity>=reactive([]);//删除方法的一部分,根据templateId删除数组数据this.tableTemplates=this.tableTemplates.filter(item=>templateId!==item.templateId);删除后tableTemplates数组中对象减少,但vue页面显示数据......
  • Spartacus Storefront 里如何在 SmartEdit 访问环境下暂时禁用 Early login
    关于SpartacusEarlylogin的功能,即如果当前客户没有登录,则显示loginpage.而不是显示原始页面。有的客户期望Spartacus在SmartEdit环境下预览时,暂时禁掉这个功能。首先,开发人员应该分析与需求相关的所有后果并对安全威胁进行建模,然后考虑是否接受它们,例如:某些功能页......
  • 用 SmartEdit 打开 SAP Commerce Cloud Storefront 时动态在 body 标签注入的 css cla
    当我们使用SAPSmartEdit打开SAPCommerceCloudStorefront时,在商户网站中,还必须在body标签中作为CSS类名包含以下唯一标识符:smartedit-page-uid-:指定指定目录和目录版本的唯一页面标识符。这是为了支持旧版实现而必需的。smartedit-page-uuid-:指定页面的全局唯一标识符(UU......
  • 谈谈Vue3中的ref和reactive
    谈谈Vue3中的ref和reactiveref和reactive是什么?ref和reactive是Vue3中用来实现数据响应式的API一般情况下,ref定义基本数据类型,reactive定义引用数据类型(我喜欢用它来定义对象,不用它定义数组,原因后面讲)我理解的ref本质上是reactive的再封装二、先聊reactivereactive定义引用数据......
  • Reactive Extensions 响应式扩展 用于事件驱动编程的库,具有可组合的声明性模型
    响应式扩展这个存储库包含四个库,它们在概念上是相关的,因为它们都与LINQoverofthings序列有关:ReactiveExtensionsfor.NET又名Rx.NET或Rx( System.Reactive ):一个用于事件驱动编程的库,具有可组合的声明性模型AsyncRx.NET(实验性预览)(System.Reactive.Async):Rx的实验......
  • Spartacus Storefront 里如何在 SmartEdit 访问环境下暂时禁用 Early login
    关于SpartacusEarlylogin的功能,即如果当前客户没有登录,则显示loginpage.而不是显示原始页面。有的客户期望Spartacus在SmartEdit环境下预览时,暂时禁掉这个功能。首先,开发人员应该分析与需求相关的所有后果并对安全威胁进行建模,然后考虑是否接受它们,例如:某些功能页......
  • Vue3 之 响应式 API reactive、 effect源码,详细注释
    Vue3之响应式APIreactive、effect源码,详细注释目录一.实现响应式API:reactive、shallowReactive、readonly、shallowReadonly1.针对不同的API创建不同的响应式对象2.实现createReactiveObject3.实现不同的拦截函数baseHandlers.ts二.实现响应式effect1.创建响应式的......
  • 二、Spring Reactive Security自定义登录页
    添加配置类:@ConfigurationpublicclassMyReactiveSecurityConfig{@BeanpublicReactiveUserDetailsServicereactiveUserDetailsService(){UserDetailsuser=User.withUsername("user").password("12345")......
  • 一、Spring Reactive Security简单使用
    SpringReactiveSecurity是结合SpringWebFlux使用的。结合SpringBoot使用,简化了大量配置。 新建SpringBoot项目,添加依赖:<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId>......