【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.hqwc.cn/news/639971.html

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

相关文章

eNSP-路由引入与过滤简单配置

目录 实验要求 IP配置 配置动态路由协议 RIP OSPF 查看建邻情况 双向重发布 路由过滤 地址前缀列表 静默接口 实验要求 1、按照图示配置 IP 地址,R1,R3,R4 上使用 loopback 口模拟业务网段 2、R1 和R2 运行 RIPv2,R2&am…

SpringCloud系列(9)--将服务消费者Consumer注册进Eureka Server

前言:上一章节我们介绍了如何将服务提供者注册进Eureka服务里,本章节则介绍如何将服务消费者Consumer注册进Eureka服务里 Eureka架构原理图 1、修改consumer-order80子模块的pom.xml文件,引入Eureka Clinet的依赖,然后reolad一下&…

学习笔记Day21:转录组差异分析

转录组差异分析 差异分析难点在于将数据处理成需要的格式 表达矩阵 数值型矩阵-count 行名是symbol 低表达量的基因需要过滤 分组信息 因子,对照组在level第一位 与表达矩阵的列一一对应 项目名称 字符串(不要有特殊字符) TCGA-XX…

LeetCode_1304.和为零的 N 个不同整数

✨✨所属专栏:LeetCode刷题专栏✨✨ ✨✨作者主页:嶔某✨✨ 题目: 题解: 题目说让我们返回一个由n个各不相同的整数组成的数组,相加为0。 这里的比较好的办法就是类似于 1 2 3 0 -3 -2 -1这样对称的数组。既满足要求…

低代码新时代:6款免费开发平台助你畅行编码之路

本篇文章为您介绍的六款免费又好用的低代码开发平台有:Zoho creator、Baserow、OS.bee、nuBuilder、JHipster、Appian。 一、Zoho creator Zoho Creator是一款国际化的低代码开发平台,有超17年低代码经验。近些年,Zoho Creator以其成本低、国…

第25天:安全开发-PHP应用文件管理包含写入删除下载上传遍历安全

第二十五天 一、PHP文件管理-下载&删除功能实现 1.文件上传: 无过滤机制黑名单过滤机制白名单过滤机制文件类型过滤机制 2.文件删除: unlink() 文件删除函数调用命令删除:system shell_exec exec等 3. 文件下载: 修改HT…

python3--lxml pytoml.core.TomlError expected_equals报错解决

文章目录 一、问题二. 解决方法:三. 参考:四. 总结 一、问题 在ubuntu的armbian上的python3中安装lxml时报错了 安装命令是 pip3 install lxml报错简略信息如下图 File "/usr/share/python-wheels/pytoml-0.1.2-py2.py3-none-any.whl/pytoml/par…

Linux debian gdb dump

1.开发背景 记录 debian 下应用程序崩溃调试方法 2.开发需求 程序越界可以定位到越界的位置附近 3.开发环境 debian 操作系统,如果不支持需要查看是否存在对应的可执行文件 4.实现步骤 4.1 设置 dump 输出大小 ulimit -c unlimited # 设置输出大小 生成core 文…

稀碎从零算法笔记Day56-LeetCode:组合总和 Ⅳ

题型:DP、数组 链接:377. 组合总和 Ⅳ - 力扣(LeetCode) 来源:LeetCode 题目描述 给你一个由 不同 整数组成的数组 nums ,和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的…

Qt中的Qmainwindow和Qwidget区别

Qmainwindow是有菜单栏的,如图 Qwidget是没有菜单栏的,如图

《网络安全-frida初探-付费应用简单逆向》

文章目录 一、目标应用二、分析流程声明文章仅供学习参考,严禁非法使用,如非法使用,而导致的一切后果,由使用者自负 一、目标应用 aHR0cHMlM0EvL3d3dy53YW5kb3VqaWEuY29tL2FwcHMvODI4NjIxMy9oaXN0b3J5X3Y5 二、分析流程 反编译apk查看相关信息 功能使用的通过该处判断的需…

C# 窗体应用程序 Chart控件显示实时曲线

IDE: VS2019 项目模板:C# windows 窗体应用(.NET Framework) 【参考】 B站上教程C#Chart控件画折线图的使用,关于Chart控件的属性,介绍得非常详细。B站上教程C#上位机Chart控件实时曲线终极讲解,对鼠标滚轮事件等,多…