首页 > 其他分享 >vue3 ref()和reactive()的

vue3 ref()和reactive()的

时间:2022-10-05 16:00:55浏览次数:60  
标签:定义 ref 数据类型 reactive vue3 数据

vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,今天我们来聊聊两种定义定义数据方式有什么不同

如上代码,我们使用变量声明的方式,ref的方式,reactive的方式定义的三个变量,num1,num2,num3

 

 

我们发现使用ref定义的数据,打印结果是一个被对象包裹的响应的数据,使用reactive的方式和纯变量声明的方式打印结果是一样的,这是什么原因呢?

我们发现在控制台输出一个警告信息, 提示100这个值不能被reactive创建,官方也推荐我们在定义数据的时候,reactive定义复杂的数据类型的数据,ref推荐定义基本数据类型,所以如果要使用reactive定义基本数据类型的话,我们需要在reactive中将数据包装一下

 

 

                   

 

 

我们在使用reactive定义数据的时候用对象做一层包裹,这样控制台就不会报警告信息了,

但是使用reactive定义的数据和ref定义的数据打印结果有一些差异

 

 

 

 

 

我们发现ref定义的数据打印结果需要.value才能获取到结果,而reactive则不需要

 

 

总结:

reactive 和 ref 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型

ref 和 reactive 本质我们可以简单地理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value

使用ref定义基本数据类型,ref也可以定义数组和对象。

标签:定义,ref,数据类型,reactive,vue3,数据
From: https://www.cnblogs.com/vant-xie/p/16755701.html

相关文章

  • Vue3.x 组合式api的生命周期钩子
    Vue3组合式api的生命周期beforeCreatecreated,setup语法糖模式(组合式api)是没有这两个生命周期的,用setup去代替onBeforeMount获取不到DOM,onMounted可以获取DOMon......
  • 分清国内版FireFox和国际版FireFox
    FireFox现在成为越来越多人替代Chrome的选择。但与Chrome不同的是,FireFox无论桌面端还是移动端,都有着『国际』和『国内』版本的区分。二、正确的下载地址2.1国内版的混淆......
  • .NET教程 - 反射 & 元数据(Reflection & Metadata)
    更新记录转载请注明出处:2022年10月5日发布。2022年10月5日从笔记迁移到博客。反射(Reflection)介绍说明大多数情况下,我们都是运行程序集中的代码处理数据但有时需......
  • quick-vue3-admin
    quick-vue3-admin是一款免费开源快速搭建中后台系统框架。本框架基于vite2+element-plus等最新主流技术并封装了通用的组件方便开发者提高工作效率。后期也会通过版本升......
  • ssh: connect to host github.com port 22: Connection refused
    ......
  • 【vue3+ts后台管理】项目搭建
    文章目录​​项目创建​​​​引入element-plus​​​​完整引入​​​​按需引入​​​​【vue3+typescript】Vue3+TS电商后台系统项目实战​​项目创建首先执行​​vuecr......
  • vue3 基础-插件 plugin 案例演示
    前篇有介绍关于插件plugin的无敌强大和基本使用流程后,当时从俺的经验上看是没咋去使用它的,即英雄无用武之地.本篇也是从网上找个案例来为plugin的强大来小试牛刀......
  • C++ 自学笔记 Declaring references 引用
    引用:类型&Y=X;Y是X的另一个名字   pointersvsreferences(指针vs引用)(ps:引用就是用的const指针)  java:所有对象放在堆里只能用指针(不能计算用的const)访......
  • uniapp + vue3糖果语法实现瀑布流商品列表
    目录效果思路实现先将列表分为两个HTML中使用左右列表进行显示完整代码效果思路瀑布流其实就是将放放商品信息列表展示的view分为了左右两个部分,然后固定了两个部分的......
  • 基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用
    刚完成一些前端项目的开发,腾出精力来总结一些前端开发的技术点,以及继续完善基于SqlSugar的开发框架循序渐进介绍的系列文章,本篇随笔主要介绍一下基于Vue3+TypeScript的全局......