学习Vue3中reactive

学习Vue3中reactive

  • 一、前言
    • 1、响应式对象
    • 2、对象属性的访问
    • 3、嵌套响应式对象
    • 4、避免直接修改响应式对象
    • 5、ref vs reactive


一、前言

在 Vue 3 中,reactive 是一个用于创建响应式对象的函数。响应式对象是 Vue 3 中数据驱动视图的核心,它们的属性的变化会自动触发相关的视图更新。下面是关于 reactive 的一些重要概念和使用方法:

1、响应式对象

通过 reactive 创建的对象是响应式的,这意味着当对象的属性发生变化时,相关的视图会自动更新。

import { reactive } from 'vue';const state = reactive({count: 0,
});// 在视图中使用 state.count,当 count 变化时,视图会自动更新

2、对象属性的访问

你可以像访问普通对象一样访问响应式对象的属性。

console.log(state.count); // 输出当前 count 的值
state.count++; // 修改 count 的值,会触发视图更新

3、嵌套响应式对象

如果响应式对象中的属性也是对象,它们也会被自动转换为响应式对象。

const nestedState = reactive({nestedObj: {nestedCount: 0,},
});nestedState.nestedObj.nestedCount++; // 触发视图更新

4、避免直接修改响应式对象

Vue 3 建议避免直接修改响应式对象,而是使用提供的 API 进行修改,以确保变更能够被 Vue 3 监测到。

5、ref vs reactive

除了 reactive 外,Vue 3 还提供了 ref 函数用于创建响应式数据。主要区别在于 ref 只能包装基本类型数据,而 reactive 可以包装任意 JavaScript 对象。

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

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

相关文章

redis的双写一致性

双写一致性问题 1.先删除缓存或者先修改数据库都可能出现脏数据。 2.删除两次缓存,可以在一定程度上降低脏数据的出现。 3.延时是因为数据库一般采用主从分离,读写分离。延迟一会是让主节点把数据同步到从节点。 1.读写锁保证数据的强一致性 因为一般放…

代码随想录训练营Day26:贪心算法:04

1.860柠檬水找零 贪心策略:先找大钱,再找小钱,20的不参与找钱 思路:用five,ten存放5元和10元的个数,初始化都是0,如果给的钱是5元,直接five,如果给的是10元,只能找5,判…

音视频入门基础:像素格式专题(2)——不通过第三方库将RGB24格式视频转换为BMP格式图片

音视频入门基础:像素格式专题系列文章: 音视频入门基础:像素格式专题(1)——RGB简介 音视频入门基础:像素格式专题(2)——不通过第三方库将RGB24格式视频转换为BMP格式图片 一、引…

AI领域最伟大的论文检索网站

📑 苏剑林(Jianlin Su)开发的“Cool Papers”网站旨在通过沉浸式体验提升科研工作者浏览论文的效率和乐趣。这个平台的核心优势在于利用Kimi的智能回答功能,帮助用户快速了解论文的常见问题(FAQ)&#xff0…

基于Qt的Model-View显示树形数据

目标 用qt的模型-视图框架实现树型层次节点的显示,从QAbstractItemModel派生自己的模型类MyTreeItemModel,用boost::property_tree::ptree操作树型数据结构,为了演示,此处只实现了个只读的模型 MyTreeItemModel的定义 #pragma o…

数据结构(一)绪论

2024年5月11日 一稿 数据元素+数据项 逻辑结构 集合 线性结构 树形结构 </

SGP.02-v4.2-001

2.4 OTA Communication on ES5 (SM-SR-eUICC) 2.4.3 SMS 在eUICC&#xff08;嵌入式通用集成电路卡&#xff09;远程配置和管理系统中&#xff0c;OTA&#xff08;空中传输&#xff09;通信由SM-SR&#xff08;订阅管理-服务器&#xff09;专门处理。SM-SR可以使用短信&…

chromium添加一个书签项,并自动显示图标

添加一个书签很简单&#xff1a; BookmarkModel* model BookmarkModelFactory::GetForBrowserContext(browser->profile()); const bookmarks::BookmarkNode* node bookmarks::AddIfNotBookmarked(model, url, title); 两句话即可。麻烦的是怎么设置完书签以后还要显示…

php开发的知识付费系统,教育机构如何实现快速招生呢?

如今教育培训市场的竞争越来越激烈&#xff0c;很多机构管理者会抱怨自己机构所在地竞争力太强&#xff0c;生源太少。想要突破机构的招生瓶颈&#xff0c;机构管理者应该如何快速招生呢? 一、无硝烟的战争—地推 校长们&#xff0c;你们知道吗? 如今互联网技术一流的阿里巴巴…

洛谷 P3809:后缀排序 ← 后缀数组

【题目来源】https://www.luogu.com.cn/problem/P3809【题目描述】 读入一个长度为 n 的由大小写英文字母或数字组成的字符串&#xff0c;请把这个字符串的所有非空后缀按字典序&#xff08;用 ASCII 数值比较&#xff09;从小到大排序&#xff0c;然后按顺序输出后缀的第一个字…

【驱动】SPI

1、简介 SPI(Serial Peripheral interface)串行外设接口。 特点: 高速:最大几十M,比如,AD9361的SPI总线速度可以达到40MHz以上全双工:主机在MOSI线上发送一位数据,从机读取它,而从机在MISO线上发送一位数据,主机读取它一主多从:主机产生时钟信号,通过片选引脚选择…

详解Python测试框架Pytest的参数化

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 上篇博文介绍过&#xff0c;Pytest是目前比较成熟功能齐全的测试框架&#xff0c;使用率肯定也不…

Coursera吴恩达深度学习专项课程01: Neural Networks and Deep Learning 学习笔记 Week 03

Neural Networks and Deep Learning Course Certificate 本文是学习 https://www.coursera.org/learn/neural-networks-deep-learning 这门课的笔记 Course Intro 文章目录 Neural Networks and Deep LearningWeek 03: Shallow Neural NetworksLearning Objectives Neural Ne…

13.Netty组件EventLoopGroup和EventLoop介绍

EventLoop 是一个单线程的执行器&#xff08;同时维护了一个Selector&#xff09;&#xff0c;里面有run方法处理Channel上源源不断的io事件。 1.继承java.util.concurrent.ScheduledExecutorService因此包含了线程池中所有的方法。 2.继承netty自己的OrderedEventExecutor …

华为数据之道第三部分导读

目录 导读 第三部分 第7章 打造“数字孪生”的数据全量感知能力 “全量、无接触”的数据感知能力框架 数据感知能力的需求起源&#xff1a;数字孪生 数据感知能力架构 基于物理世界的“硬感知”能力 “硬感知”能力的分类 “硬感知”能力在华为的实践 基于数字世界的…

hbase shell 启动报错问题

报错1&#xff1a; stopping hbasecat: /tmp/hbase-hadoop-master.pid: No such file or directory 报错2&#xff1a; ERROR [main] zookeeper.RecoverableZooKeeper: ZooKeep 解决&#xff1a; 看看你启动的hbase路径是不是错了&#xff0c;大概率是这种问题 不是启动hb…

Vuex:Vue.js 的状态管理库

一、Vuex 简介 Vuex 是 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的出现解决了组件间共享状态的问题&#xff0c;使得状态管理变得简单、可预测和可维护。 二、Vuex 核心概…

快递物流查询:如何实现快递批量查询?这些技巧助你轻松应对

在日常生活和工作中&#xff0c;我们经常需要查询快递物流信息&#xff0c;尤其是当面对大量的快递包裹时&#xff0c;逐一查询无疑会耗费大量的时间和精力。这时&#xff0c;实现快递批量查询就显得尤为重要。本文将为你介绍办公提效工具一些实现快递批量查询的技巧&#xff0…

如何将draw.io的图导入word

解决办法&#xff08;有点点复杂&#xff09; 先在http://draw.io导出格式为svg矢量图格式&#xff0c;然后用visio打开svg&#xff0c;调整完界面等等之后再保存&#xff0c;然后在word里面插入visio

Android 13 aosp 默认关闭SELinux

通过adb修改 adb root adb shell setenforce 0 // 开SELinux&#xff0c;设置成模式permissive adb shell setenforce 1 // 关SELinux&#xff0c;设置成模式enforce adb shell getenforce // 获取当前SELinux状态源码修改 Android_source/system/core/init/selinu…