详解vue3中ref和reactive用法和区别

vue3中ref和reactive区别

  • 1、前言
  • 2、基本用法
    • 2.1 ref
    • 2.2 reactive
  • 3、ref和reactive定义数组对比
    • 3.1 ref定义数组
    • 3.1 reactive定义数组
  • 4、ref 和reactive的区别

1、前言

refreactiveVue3中用来实现数据响应式的API,一般情况下,ref定义基本数据类型,reactive定义引用数据类型。

2、基本用法

2.1 ref

  • 理解: ref的参数一般是基本数据类型,也可以是对象类型;如果参数是对象类型,其实底层的本质还是reactive,系统就会自动将ref转换为reactive;我们如果去访问ref定义的值,那么就使用.value的属性去访问定义的数据;ref的底层原理同reactive一样,都是Proxy
  • 语法: const xxx = ref(initValue)

基础用法

<template><h1>{{ name }}</h1><button @click="changeName">修改名称</button>
</template><script setup>
import { ref} from 'vue'
const name = ref('张三')
const changeName = () => {name.value = '李四'age.value = 20
}
</script>

2.2 reactive

  • reactive定义引用数据类型(以对象和数组举例),它能够将复杂数据类型的内部属性或者数据项声明为响应式数据,所以reactive的响应式是深层次的,其底层是通过ES6Proxy来实现数据响应式,相对于Vue2Object.defineProperty,具有能监听增删操作,能监听对象属性的变化等优点。

基础用法

<template><Child:current="pageConfig.pageNum"></Child>
</template><script setup>
import { reactive} from 'vue'
const queryParams= reactive({pageNum: 1,pageSize: 10
}) const onChange = () => {queryParams.pageNum = 2;queryParams.pageSize = 20;
}
</script>

若用reactive定义基本数据类型,Vue3会报警告错误,如图

const str = reactive('字符串')

在这里插入图片描述

3、ref和reactive定义数组对比

3.1 ref定义数组

<template><Table :data="tableData"></Table>
</template><script setup>
import { ref, reactive, onMounted } from 'vue'
import { getTableDataApi } from '@/api'
const queryParams= reactive({pageNum: 1,pageSize: 10
}) const tableData = ref([]) 
onMounted(() => {getTableData()
})
const getTableData = async () => {const { data } = await getTableDataApi(queryParams) // 模拟接口获取表格数据tableData.value = data 
}
</script>

以我们常用的表格数据举例,可以看到,ref定义数组与定义基本数据类型没什么差别,接下来看看reactive

3.1 reactive定义数组

<template><Table :data="tableData"></Table>
</template><script setup>
import { ref, reactive, onMounted } from 'vue'
import { getTableDataApi } from '@/api'
const queryParams= reactive({pageNum: 1,pageSize: 10
}) const tableData = reactive([]) 
onMounted(() => {getTableData()
})
const getTableData = async () => {const { data } = await getTableDataApi(queryParams) // 模拟接口获取表格数据tableData= data 
}
</script>

需要注意的是,reactive定义的数组使用 tableData = data 的修改方式会造成 tableData 响应式丢失。

解决方法如下:

// 方法一:改为 ref 定义
const tableData = ref([])
const getTableData = async () => {const { data } = await getTableDataApi(queryParams)tableData.value = data // 使用.value重新赋值
}
// 方法二:使用 push 方法
const tableData = reactive([])
const getTableData = async () => {const { data } = await getTableDataApi(queryParams)tableData.push(...data) // 先使用...将data解构,再使用push方法
}
// 方法三:定义时数组外层嵌套一个对象
const tableData = reactive({ list:[] })
const getTableData = async () => {const { data } = await getTableDataApi(queryParams)tableData.list = data // 通过访问list属性重新赋值
}

4、ref 和reactive的区别

  1. ref用于定义基本类型和引用类型,reactive仅用于定义引用类型;
  2. reactive只能用于定义引用数据类型的原因在于内部是通过ES6的Proxy实现响应式的,而Proxy不适用于基本数据类型;
  3. ref定义对象时,底层会通过reactive转换成具有深层次的响应式对象,所以ref本质上是reactive的再封装;
  4. 在JS中我们如果去对数据进行操作,在ref定义的数据中,使用变量.value;访问reactive不需要;
  5. 在定义数组时,建议使用ref,从而可避免reactive定义时值修改导致的响应式丢失问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/117863.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react css 污染解决方法

上代码 .m-nav-bar {background: #171a21;.content {height: 104px;margin: 0px auto;} }import React from "react"; import styles from ./css.module.scssexport default class NavBar extends React.Component<any, any> {constructor (props: any) {supe…

定位与轨迹-百度鹰眼轨迹开放平台-学习笔记

1. 百度鹰眼轨迹的主要功能接口 百度的鹰眼轨迹平台&#xff0c;根据使用场景不同&#xff0c;提供了web端、安卓端等各种类型的API与SDK&#xff0c;本文章以web端API为例&#xff0c;介绍鹰眼轨迹的使用。 2. API使用前的准备 使用鹰眼轨迹API&#xff0c;需要两把钥匙&…

分布式session的4种解决方案

分布式session的4种解决方案 1、cookie和session cookie和session都是用来跟踪用户身份信息的会话方式。 cookie存储的数据保存在本地客户端&#xff0c;用户获取容易&#xff0c;但安全性不高&#xff0c;存储数据小。 session存储的数据保存在服务器&#xff0c;用户不易获取…

Redis网络模型

目录 Redis网络模型 用户空间和内核态空间 阻塞IO(BIO) 非阻塞IO(NIO) IO多路复用 信号驱动IO 异步IO(AIO) Redis到底是单线程还是多线程&#xff1f; 为什么要使用单线程&#xff1f; Redis网络模型 进程的寻址空间会划分为两部分&#xff1a;内核空间、用户空间 用…

自然语言处理(六):词的相似性和类比任务

词的相似性和类比任务 在前面的章节中&#xff0c;我们在一个小的数据集上训练了一个word2vec模型&#xff0c;并使用它为一个输入词寻找语义相似的词。实际上&#xff0c;在大型语料库上预先训练的词向量可以应用于下游的自然语言处理任务&#xff0c;为了直观地演示大型语料…

2022年下半年系统架构设计师真题(下午带答案)

试题一 (25分) 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性&#xff0c;由于当前用户规模不大&#xff0c;业务也相对…

使用 ElasticSearch 作为知识库,存储向量及相似性搜索

一、ElasticSearch 向量存储及相似性搜索 在当今大数据时代&#xff0c;快速有效地搜索和分析海量数据成为了许多企业和组织的重要需求。Elasticsearch 作为一款功能强大的分布式搜索和分析引擎&#xff0c;为我们提供了一种优秀的解决方案。除了传统的文本搜索&#xff0c;El…

【大数据模型】让chatgpt为开发增速(开发专用提示词)

汝之观览&#xff0c;吾之幸也&#xff01;本文主要聊聊怎样才能更好的使用提示词&#xff0c;给开发提速&#xff0c;大大缩减我们的开发时间&#xff0c;比如在开发中使用生成表结构脚本的提示词&#xff0c;生成代码的提示词等等。 一、准备 本文主要根据Claude进行演示&am…

maven的依赖下载不下来的几种解决方法

前言 每次部署测试环境&#xff0c;从代码库拉取代码&#xff0c;都会出现缺少包的情况。然后找开发一通调试&#xff0c;到处拷包。 方案一&#xff1a;pom文件注释/取消注释 注释掉pom.xml里的报红色的依赖&#xff08;同时可以把本地maven库repo里对应的包删除&#xff09;&…

大数据项目实战(Sqoop安装)

一&#xff0c;搭建大数据集群环境 1.4 Sqoop安装 1.sqoop安装 &#xff08;1&#xff09;上传安装包 &#xff08;2&#xff09;解压安装包 tar -zxvf sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz -C /export/servers &#xff08;3&#xff09;重命名 mv sqoop-1.4.6.b…

mysql通过.frm和.ibd 文件恢复数据库

问题背景&#xff1a;由于强制在服务关闭mysql导致部分数据表以及数据丢失 如下图只有.frm .ibd的文件为我的问题文件 查找不到表结构和表数据目录D:XXXX\mysql-5.7.24-winx64\data\mydata 从frm文件中恢复表结构 先把原来的数据备份一次 避免过程中出错 先备份之前数据的.fr…

PHP8内置函数中的数学函数-PHP8知识详解

php8中提供了大量的内置函数&#xff0c;以便程序员直接使用常见的内置函数包括数学函数、变量函数、字符串函数、时间和日期函数等。今天介绍内置函数中的数学函数。 本文讲到了数学函数中的随机数函数rand()、舍去法取整函数floor()、向上取整函数 ceil()、对浮点数进行四舍…

C++面试题(丝)-计算机网络部分(1)

目录 1计算机网络 53 简述epoll和select的区别&#xff0c;epoll为什么高效&#xff1f; 54 说说多路IO复用技术有哪些&#xff0c;区别是什么&#xff1f; 55 简述socket中select&#xff0c;epoll的使用场景和区别&#xff0c;epoll水平触发与边缘触发的区别&#xff1f;…

排序算法学习

总体概况 参考自&#xff1a;https://github.com/hustcc/JS-Sorting-Algorithm 排序算法是《数据结构与算法》中最基本的算法之一。 排序算法可以分为内部排序和外部排序&#xff0c;内部排序是数据记录在内存中进行排序&#xff0c;而外部排序是因排序的数据很大&#xff0c…

python的观察者模式案例

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言二、具体代码写在结尾 前言 最近写安卓的代码比较多&#xff0c;了解了java代码的注册回调机制&#xff0c;也就是观察者模式&#xff0c;搜索了一下python也有…

04_22 vma(进程下的每个虚拟内存区域查看)对象实战

前言 vma不太懂的可以往前翻 03_008内存映射原理_虚拟内存区域vm_area_struct详解,和mmap系统钓调用及物理内存结构体完全分析 vam 虚拟内存区域 每个进程下有多个vma 这次是查看每个vma的起始地址 结束地址和大小使用 1.进程在用户空间调用mmap也就是上面那个函数。 2.在当前…

UE4 植物生长

这个可以改变SplineMesh朝向

使用Visual Studio 2022实现透明按钮和标签、POPUP样式窗体的一种工业系统的UI例程

例程实现的功能说明 1、主窗体采用POPUP样式&#xff0c;无标题栏、无菜单栏&#xff0c;适合工业类软件 2、按钮、标签使用自绘&#xff0c;实现透明样式&#xff0c;可以实现灵活的样式设计&#xff0c;更具设计感 按钮重绘函数&#xff1a;OnDrawItem()按钮样式设定&#…

深入探讨梯度下降:优化机器学习的关键步骤(二)

文章目录 &#x1f340;引言&#x1f340;eta参数的调节&#x1f340;sklearn中的梯度下降 &#x1f340;引言 承接上篇&#xff0c;这篇主要有两个重点&#xff0c;一个是eta参数的调解&#xff1b;一个是在sklearn中实现梯度下降 在梯度下降算法中&#xff0c;学习率&#xf…

Redis之管道解读

目录 基本介绍 使用例子 管道对比 管道与原生批量命令对比 管道与事务对比 使用pipeline注意事项 基准测试 基本介绍 Redis是一种基于客户端-服务端模型以及请求/响应协议的TCP服务器。 这意味着请求通常按如下步骤处理&#xff1a; 客户端发送一个请求到服务器&am…