vue3中ref和reactive联系与区别以及如何选择

vue3中ref和reactive区别与联系

区别

1、ref既可定义基本数据类型,也可以定义引用数据类型,reactive只能定义应用数据类型
2、ref在js中取响应值需要使用 .value,而reactive则直接取用既可
3、ref定义的对象通过.value重新分配新对象时依旧保持数据响应式,而reactive重新分配新对象会失去响应式
4、使用ref定义引用数据类型时,通过watch监听该响应式对象如果未配置deep: true,当改变对象属性时,不会触发watch,只有重新分配新对象才会触发watch,配置deep: true才会触发,且会导致newVal和oldVal是一样的,(因为watch监听的是地址,只改变属性值时地址是不变的);而reactive定义的对象默认开启deep: true,且无法关闭,改变对象属性,会触发watch。

例子

// 例1:(区别1)
let name = ref('张三');
let userInfo = ref({age: 18, address: '北京市天安门'});
let studyInfo = reactive({school: '清北大学', score: 100});// 例2:(区别2)
name.value;  // 张三
userInfo.value.age; // 18
userInfo.value.address;  // 北京市天安门
studyInfo.school;  // 清北大学
studyInfo.score; // 100// 例3:(区别3)
name.value = "zhangsan";  // 页面上的数据会响应式更新,张三 --> zhangsan
userInfo.value = {age: 22, address: '上海市陆家嘴'};  // 页面也会响应式更新userInfo的相关数据
studyInfo = {school: '复交大学', score: 99};  // 页面不会响应式更新studyInfo,但是js里的studyInfo 实际是变了的
// 解决studyInfo失去响应式的问题
Object.assign(studyInfo, {school: '复交大学', score: 99});  // 这样就可以响应式更新了
// 错误写法
studyInfo = reactive({school: '复交大学', score: 99});  // studyInfo实际已经是个新reactive对象了

联系

ref定义的引用数据类型,实际也在内部调用了reactive,value中返回的依旧是个proxy
在这里插入图片描述

补充

如果使用ref不想手敲.value时,可以在volar插件中配置 Dot Value,勾选上,会自动给你补齐.value

开发中如何选择ref还是reactive

1、定义基本数据类型必须用ref;
2、定义层级不深的响应式对象ref和reactive均可;
3、定义层级比较深的响应式对象,推荐使用reactive;
4、定义表单的话推荐使用reactive。
以上只是建议,非强制性。
欢迎补充指正

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

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

相关文章

自学Python,需要注意哪些?

为什么要学习Python? 在学习Python之前,你不要担心自己没基础或“脑子笨”,我始终认为,只要你想学并为之努力,就能学好,就能用Python去做很多事情。在这个喧嚣的时代,很多技术或概念会不断兴起…

php 函数声明与调用

在 PHP 中,函数声明和调用的语法如下: 函数声明的一般形式为: function functionName($param1, $param2, ...) {// 函数体return $result; // 可选 } 例如: function add($a, $b) {return $a $b; } 函数调用的一般形式为&am…

Elasticsearch 地理空间搜索 - 远超 OpenSearch

作者:来自 Elastic Nathan_Reese 2021 年,OpenSearch 和 OpenSearch Dashboards 开始作为 Elasticsearch 和 Kibana 的分支。 尽管 OpenSearch 和 OpenSearch Dashboards 具有相似的血统,但它们不提供相同的功能。 在分叉时,只能克…

纯化蛋白质树脂ES-4060_用于吸附蛋白质树脂

蛋白纯化树脂是一种固定在基质中的化学物质,具有选择性地与目标蛋白结合,并通过洗脱将其从混合物中分离出来。蛋白纯化树脂的工作原理主要分为三个步骤:吸附、洗脱和再生。 吸附 蛋白纯化树脂通过与目标蛋白之间的特定相互作用来吸附目标蛋白。这些相互…

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷5

某企业根据自身业务需求,实施数字化转型,规划和建设数字化平台,平台聚焦“DevOps开发运维一体化”和“数据驱动产品开发”,拟采用开源OpenStack搭建企业内部私有云平台,开源Kubernetes搭建云原生服务平台,选…

Kafka集群部署 (KRaft模式集群)

KRaft 模式是 Kafka 在 3.0 版本中引入的新模式。KRaft 模式使用了 Raft 共识算法来管理 Kafka 集群元数据。Raft 算法是一种分布式共识算法,具有高可用性、可扩展性和安全性等优势。 在 KRaft 模式下,Kafka 集群中的每个 Broker 都具有和 Zookeeper 类…

飞腾FT2000-4/D2000-8 VPX主板

产品特点 ①国产飞腾FT2000-4或D2000-8处理器 ,同一模块兼容两种处理器,可以根据性能需要选择 ②丰富的万兆以太网、千兆以太网、USB、SATA接口,可用作数据处理、存储、通信服务器 ③内部集成FPGA-V7协处理器,支持SRIO、LVDS等…

【LangChain学习之旅】—(5) 提示工程(上):用少样本FewShotTemplate和ExampleSelector创建应景文案

【LangChain学习之旅】—(5) 提示工程(上):用少样本FewShotTemplate和ExampleSelector创建应景文案 提示的结构LangChain 提示模板的类型使用 PromptTemplate使用 ChatPromptTemplateFewShot 的思想起源使用 FewShotPr…

Android通过Recyclerview实现流式布局自适应列数及高度

调用 FlowAdapter 跟普通recyclerview一样使用 RecyclerView rvLayout holder.getView(R.id.spe_tag_layout); FlowAdapter rvAdapter new FlowAdapter(); FlowLayoutManager flowLayoutManager new FlowLayoutManager(); rvLayout.setLayoutManager(flowLayoutManager); r…

MyBatis源码分析(六):数据源模块

1. 概述 本文,我们来分享 MyBatis 的数据源模块,对应 datasource 包。如下图所示: ​ 在 MyBatis源码分析(二):项目结构 中,简单介绍了这个模块如下: 数据源是实际开发中常用的组件…

Python Jinja2:强大易用的模板引擎

Jinja2是一个基于Python的模板引擎,它的功能类似于PHP的smarty,J2ee的Freemarker和velocity。 模板引擎的应用场景非常广泛,它可以将动态数据与静态模板结合,提高发效率和代码可维护性。 我们平时接触各类网页,邮件通…

RIS 辅助无线网络:基于模型、启发式和机器学习の优化方法

目录 abstractintroduction相关研究BACKGROUND AND PROBLEM FORMULATIONS FOR OPTIMIZING RIS-AIDED WIRELESS NETWORKSA 优化RIS-AIDED无线网络的背景和问题公式RIS操作原则:RIS控制:RIS部署 B 总速率/容量最大化C 功率最小化D 能源效率最大化E 用户公平…

Opencv实验合集——实验七:二维码和条形码匹配

1.概念 二维码(QR码) 概念: 二维码是一种矩阵式的二维条码,由黑白方块组成,可以存储大量的信息,包括文本、链接、数字等。QR码的编码方式是在矩阵中通过不同的黑白方块组合表示不同的信息。 特点&#xf…

李沐-《动手学深度学习》--02-目标检测

一 、目标检测算法 1. R-CNN a . 算法步骤 使用启发式搜索算法来选择锚框(选出多个锚框大小可能不一,需要使用Rol pooling)使用预训练好的模型(去掉分类层)对每个锚框进行特征抽取(如VGG,AlexNet…)训练…

招投标系统是Electron的纯内网编辑Office Word,可以设置部分区域可编辑,其他的地方不能编辑吗?

问题: 我们是招投标系统的开发公司,框架是用的Electron,需要在纯内网的环境下编辑Office Word,可以设置部分区域可编辑,其他的地方不能编辑吗(如下红框位置)并且在用户忘记填写一些区域的时候做…

爬虫技术的法律风险与规避方法,你必须知道!

在互联网时代,信息的获取变得异常重要。爬虫技术,一种可以自动提取网页数据的工具,应运而生。然而,随着爬虫技术的广泛应用,一个问题愈发凸显:爬虫究竟是合法的工具,还是潜藏着法律风险的数字探…

K8S 存储卷

意义:存储卷----数据卷 容器内的目录和宿主机的目录进行挂载 容器在系统上的生命周期是短暂的,delete,k8s用控制器创建的pod,delete相当于重启,容器的状态也会回复到初始状态 一旦回到初始状态,所有的后天编辑的文件…

React 基本使用

create-react-app 创建 react 项目的脚手架。 React 基本用法 jsx 语法 变量、表达式 import React from react;class JSXBaseDemo extends React.Component {constructor(props) {super(props);this.state {name: 章三};}render() {// 获取变量 插值const pElem <p&…

如何用 Python 实现一个 “系统声音” 的实时律动挂件

前言 应该是三年前&#xff0c;我用 Esp8266 和 ws2812 实现了一个音乐律动灯带。就是电脑播放音乐时&#xff0c;灯带会随着系统内部音乐播放的频率而闪动不同色彩的灯珠。而当时用来监听系统声音的工具是一个博主提供的&#xff0c;除了实时采集声音外还通过 UDP 传递数据到…

玉米浸泡液植酸吸附树脂

植酸为环己六醇六磷酸&#xff0c;分子量为660&#xff0c;植酸钠为环己六醇六磷酸钠&#xff08;Na12C6H6O24P6&#xff09;分子量为924。 植酸用途&#xff1a;在食品工业中植酸钠可用作食品添设剂&#xff0c;菲丁&#xff08;植酸钙&#xff09;可用于生产肌醇&#xff0c…