【Vue3】$subscribe订阅与反应

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

文章目录

  • 🍋概念
  • 🍋作用
  • 🍋优劣
  • 🍋使用方法
  • 🍋结语

🍋概念

在Vue3中,订阅(Subscription)是指对数据或事件的监听和响应机制。Vue3中的订阅可以用来监听数据的变化,当数据发生变化时,订阅者可以收到通知并做出相应的处理

🍋作用

订阅的主要作用是实现数据驱动视图的更新。当数据发生变化时,订阅者可以及时地更新视图,保持视图与数据的同步

🍋优劣

优点:

实现了数据的响应式更新,简化了视图与数据的同步逻辑。
提高了代码的可维护性和可读性,使得代码更易于理解和调试。
可以精确地控制数据的变化,避免不必要的视图更新。

缺点:

在处理大量数据时,可能会导致性能问题,需要谨慎使用。
对于复杂的数据变化场景,可能需要额外的处理逻辑来确保数据的正确性。

🍋使用方法

我们只需要在.vue中加上一个方法

 talkStore.$subscribe((mutate,state)=>{console.log('talkStore里面保存的数据发生了变化',mutate,state)localStorage.setItem('talkList',JSON.stringify(state.talkList))})

加上之后,我们会在也application中看到数据,哪怕我们刷新,依旧不丢失
在这里插入图片描述

那么如果我们想要刷新不丢失的话,而且在页面也可以显示的话,我们需要对.ts文件进行处理

state(){return {talkList:JSON.parse(localStorage.getItem('talkList') as string) || []}}

它的作用是定义了一个名为 talkList 的状态变量,其初始值为从 localStorage 中获取的 talkList 数据(如果存在),否则为一个空数组 []

这样就可以保证数据不丢失了,感兴趣的小伙伴可以重新启动服务,进行自行测试,结果显然是不丢失的
在这里插入图片描述

🍋结语

订阅是Vue3中非常重要的概念,它实现了数据的响应式更新,是实现MVVM模式的关键。合理地使用订阅可以提高代码的可维护性和可读性,帮助开发者更好地管理数据与视图的关系

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

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

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

相关文章

【深度学习总结_02】在自己的数据集微调SAM

【深度学习总结_02】在自己的数据集微调SAM 前言 SAM (Segment Anything Model)是Meta AI开发的一种分割模型。它被认为是计算机视觉的第一个基础模型。SAM是在包含数百万图像和数十亿mask的庞大数据语料库上进行训练的,这使得它非常强大。SAM能够为各种各样的图像…

代码随想录算法训练营第56天|583. 两个字符串的删除操作、72. 编辑距离

583. 两个字符串的删除操作 题目链接:两个字符串的删除操作 题目描述:给定两个单词 word1 和 word2 ,返回使得 word1 和 word2 **相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 动态规划(思路一)&…

超越OpenAI,谷歌重磅发布从大模型蒸馏的编码器Gecko

引言:介绍文本嵌入模型的重要性和挑战 文本嵌入模型在自然语言处理(NLP)领域扮演着至关重要的角色。它们将文本转换为密集的向量表示,使得语义相似的文本在嵌入空间中彼此靠近。这些嵌入被广泛应用于各种下游任务,包括…

VideoComposer: Compositional Video Synthesis with Motion Controllability

decompose videos into three distinct types of conditions: textual conditions, spatial conditions, temperal conditions 条件的内容: a. textual condition: coarse grained visual content and motions, 使用openclip vit-H/14的text encoder b. spatial co…

Spring MVC的请求处理流程

Spring MVC的请求处理流程是一个精心设计的过程,旨在高效、灵活地处理Web请求并生成相应的响应。以下是该流程的详细解释: 用户发送请求: 用户通过浏览器或其他客户端发送HTTP请求到服务器。这个请求包含了请求的URL、请求方法(如…

Splashtop 将在 NAB 展会上推出音视频剪辑增强功能

加利福尼亚州拉斯维加斯 Splashtop 在简化随处办公远程解决方案领域处于领先地位,在今年举行的 NAB 展会上将推出 Enterprise 解决方案的高级性能功能,均面向广播和媒体工作者而设计。 Splashtop Enterprise 经过优化,可为执行视频剪辑、唇…

Excel文件解析--超大Excel文件读写

使用POI写入 当我们想在Excel文件中写入100w条数据时,我们用普通的XSSFWorkbook对象写入时会发现,只有在将100w条数据全部加载入内存后才会用write()方法统一写入,这样效率很低,所以我们引入了SXSSFWorkbook进行超大Excel文件的读…

fixture固件和装饰器@pytest.mark.parametrize的参数化差异

fixture固件中有params参数可以进行参数化配置,装饰器pytest.mark.parametrize也可以为用例进行参数化配置,它们都是pytest框架中用于参数化测试的机制,但它们之间还是有很大差异的,该篇文章就来讲一讲这二者的区别使用&#xff1…

java开发之路——node.js安装

1. 安装node.js 最新Node.js安装详细教程及node.js配置 (1)默认的全局的安装路径和缓存路径 npm安装模块或库(可以统称为包)常用的两种命令形式: 本地安装(local):npm install 名称全局安装(global):npm install 名称 -g本地安装和全局安装…

C++中的STL——stack类的基本使用

目录 stack类介绍 stack类定义 stack类常见构造函数 stack数据操作 empty()函数 size()函数 top()函数 push()函数 pop()函数 swap()函数 stack类介绍 stack是一种容器适配器,专门用在具有后进先出操作的上下文环境中,其删除只能从容器的一端…

【Leetcode】string类刷题

🔥个人主页:Quitecoder 🔥专栏:Leetcode刷题 目录 1.仅反转字母2.字符串中第一个唯一字符3.验证回文串4.字符串相加5.反转字符串I I6.反转字符串中的单词III7.字符串相乘8.把字符串转换为整数 1.仅反转字母 题目链接:…

Rust 模式匹配中的 和 ref

一、Rust & 和 ref 1.Rust的ref有什么用 根据Rust官方文档https://doc.rust-lang.org/std/keyword.ref.html Rust ref 主要用在模式匹配match的所有权问题中。 ref在 Rust中,也是声明一个指针类型变量,进一步说明ref和&在其它方面区别&#xf…

一篇文章带您了解面向对象(java)

1.简单理解面向过程编程和面向对象编程 面向过程编程:开发一个一个的方法,有数据需要处理,我们就可以调用方法来处理。 package com.web.quictstart;public class demo1 {public static void main(String[] args) {totalScore("张三&q…

mac上VMware fusion net模式无法正常使用的问题

更新时间:2024年04月22日21:39:04 1. 问题 环境: intel芯片的macbook pro VMware fusion 13.5.1 无法将“Ethernet0”连接到虚拟网络“/dev/vmnet8”。在这里显示这个之后,应该是vmnet8的网段发生了冲突,所以导致无法正常使用…

【栈】Leetcode 739. 每日温度【中等】

每日温度 给定一个整数数组 temperatures ,表示每天的温度,返回一个数组 answer ,其中 answer[i] 是指对于第 i 天,下一个更高温度出现在几天后。如果气温在这之后都不会升高,请在该位置用 0 来代替。 示例 1: 输入…

【操作系统】——死锁

基础知识 一个进程需要向一个进程传递数据,后面的进程必须等到前面的进程到达才能继续运行,这是进程间的一种次序关系。称为同步 在引入线程的系统中,进程内的多个线程可以并发或并行运行 遇到问题:对资源不加限制地分配可能导致…

字符串加密

描述 这是一个古老的字符串加密方法,给定两个长度不超过100个字符的字符串,判断是否可以把其中一个重排,然后对26个字母做一个一一映射,使得两个字符串相同。 再进行映射:例如 每个字母映射到前一个字母(B…

基于Spring Cloud Alibaba的异地多活设计

胡弦,视频号2023年度优秀创作者,互联网大厂P8技术专家,Spring Cloud Alibaba微服务架构实战派(上下册)和RocketMQ消息中间件实战派(上下册)的作者,资深架构师,技术负责人,极客时间训练营讲师,四…

论坛报名 | 中关村论坛“区块链与隐私计算论坛”报名开始!

2024中关村论坛—区块链与隐私计算论坛 正在报名! 长安链开源社区作为区块链与隐私计算分论坛协同支持社区,为社区成员单位提供免费参会名额,名额有限先到先得,欢迎积极报名! 论坛时间:2024年4月27日&…

前端开发攻略---拖动归类,将元素拖拽到相应位置

1、演示 2、代码 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-…