草庐IT

VueUse（中文）——简介

whyfail 2024-01-26 原文

一、VueUse——简介

  • VueUse是由Anthony Fu等大佬写的基于Vue的自定义钩子集合。
  • 类似于基于React的 ahooks
  • 功能丰富：200+功能
  • 无缝迁移：适用于Vue 3和Vue2.7版本之后
  • 支持tree shaking：只引入自己需要的那部分，打包会更小
  • 还有其他的亮点，可以去官网查看

二、VueUse——快速开始

  • VueUse是一个基于Composition API的实用函数集合。
  • 所以需要熟悉 Composition API 的基本概念

1、安装

  • 下载包的方式

npm i @vueuse/core

  • CDN 引入方式
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

2、使用方法

三、最优的使用方法

1、解构

  • VueUse中的大多数函数都返回一个refs对象，你可以使用ES6的对象解构语法来获取你需要的：
  • 如果你不喜欢.value的使用方式，你可以使用reactive()来包裹返回的refs对象：

2、清除副作用

  • 类似于Vue的watch 和computed ，当组件卸载时将被处理掉，VueUse的功能也会自动清除副作用。
  • 例如：useEventListener，当组件销毁时候，会自动调用removeEventListener 来进行处理，无需手动处理。
  • 所有的VueUse函数都遵循这个约定。
  • 为了方便我们可以手动处理这些函数，一些函数返回一个stop处理程序：
  • 虽然不是所有函数都返回处理程序，但更通用的解决方案是使用Vue中的 effectScope API。

3、传递Ref作为参数

  • 在Vue中，我们使用setup()函数来构建数据和逻辑之间的“连接”。
  • 为了使它更灵活，大多数VueUse函数也接受参数的ref版本。
  • 规范使用的方式：通常useTitle返回一个反映页面标题的ref。当你给ref赋新值时，它会自动更新标题。
  • 连接使用的方式：如果你认为有“关联”，你可以传递一个ref，使它绑定到页面的标题。
  • Reactive Getter方式：从VueUse 9.0开始，引入了一个新的方式来传递“Reactive Getter”作为参数。
mdashVueUsecodespanlivue.js前端javascript

有关VueUse（中文）——简介的更多相关文章

  1. 亚特兰蒂斯的回声（中文版): chatGPT 的杰作 - 2

    英文版英文链接关注公众号在“亚特兰蒂斯的回声”中踏上一段难忘的冒险之旅，深入未知的海洋深处。足智多谋的考古学家AriaSeaborne偶然发现了一件古代神器，揭示了一张通往失落之城亚特兰蒂斯的隐藏地图。在她神秘的导师内森·兰登教授的指导和勇敢的冒险家亚历克斯·默瑟的帮助下，阿丽亚开始了一段危险的旅程，以揭开这座传说中城市的真相。他们的冒险之旅带领他们穿越险恶的大海、神秘的岛屿和充满陷阱和谜语的致命迷宫。随着Aria潜在的魔法能力的觉醒，她被睿智勇敢的QueenNeria的幻象所指引，她让她为即将到来的挑战做好准备。三人组揭开亚特兰蒂斯令人惊叹的隐藏文明，并了解到邪恶的巫师马拉卡勋爵试图利用其古

  2. HBase Region 简介和建议数量&大小 - 2

    Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile

  3. IDEA 2023.1 正式发布，新特性简介 - 2

     昨晚看到IDEA官推宣布IntelliJIDEA2023.1正式发布了。简单看了一下，发现这次的新版本包含了许多改进，进一步优化了用户体验，提高了便捷性。至于是否升级最新版本完全是个人意愿，如果觉得新版本没有让自己感兴趣的改进，完全就不用升级，影响不大。软件的版本迭代非常正常，正确看待即可，不持续改进就会慢慢被淘汰！根据官方介绍：IntelliJIDEA2023.1针对新的用户界面进行了大量重构，这些改进都是基于收到的宝贵反馈而实现的。官方还实施了性能增强措施，使得Maven导入更快，并且在打开项目时IDE功能更早地可用。由于后台提交检查，新版本提供了简化的提交流程。IntelliJIDEA

  4. 「想体验ChatGPT中文聊天？」那快进来，你用不上算我输 - 2

    ♥️作者：白日参商🤵‍♂️个人主页：白日参商主页♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！🎈🎈加油！加油！加油！加油🎈欢迎评论💬点赞👍🏻收藏📂加关注+！「想体验ChatGPT中文聊天？」那快进来，你用不上算我输项目场景：项目条件一、那就开始吧1、安装ChatGPT-Desktop2、OpenAPI设置二、使用实例恭喜你！！！配置成功了！！！API和URL都是博主免费提供给大家的！！！恭喜你！！！配置成功了！！！API和URL都是博主免费提供给大家的！！！🎈🎈加油！加油！加油！加油🎈欢迎评论💬点赞👍🏻收藏📂加关注+！项目场景：近几个月可以说ChatGPT是火得一

  5. 对于体育新闻中文文本关键字提取有哪些关键字提取算法及其步骤 - 2

    对于体育新闻中文文本的关键字提取，常用的算法包括TF-IDF、TextRank和LDA等。它们的基本步骤如下：1.TF-IDF算法： -将文本进行分词和词性标注处理。-统计每个词在文本中的词频（TF）。-计算每个词在整个语料库中出现的文档频率（DF）和逆文档频率（IDF）。-计算每个词的TF-IDF值，并按照值的大小进行排序，选择排名前几的词作为关键字。2.TextRank算法：-将文本进行分词和词性标注处理。-将分词结果转化成图模型，每个词语为节点，根据词语之间的共现关系建立边。-对图模型进行迭代计算，计算每个节点的PageRank值，表示该节点的重要性。-选择排名前几的节点作为关键字。3.

  6. ruby-on-rails - Rails_Admin - 如何更改 Post View 中文本字段的大小 - 2

    RailsAdmin中Post的“正文”输入区域的默认高度非常小。我想弄清楚如何增加高度。有什么建议么？config.modelPostdolabel'Blog'weight0editdofield:userfield:titlefield:body_formatfield:bodydo(somethinghere?)end 最佳答案 configure:descriptiondohtml_attributesrows:20,cols:50end 关于ruby-on-rails-Rail

  7. pytest简介 - 2

    介绍pytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动化测试、接口自动化测试（pytest+requests）pytest具有很多第三方插件，并且可以自定义扩展，比较好用的如pytest-selenium（集成selenium）、pytest-html（完美html测试报告生成）、pytest-rerunfailures（失败case重复执行）、pytest-xdist（多CPU分发）等测试用例的skip和xfail处理可以很好的和jenkins集成

  8. SpringCloud入门实战（七）-Hystrix入门简介 - 2

    📝学技术、更要掌握学习的方法，一起学习，让进步发生👩🏻作者：一只IT攻城狮。💐学习建议：1、养成习惯，学习java的任何一个技术，都可以先去官网先看看，更准确、更专业。💐学习建议：2、然后记住每个技术最关键的特性（通常一句话或者几个字），从主线入手，由浅入深学习。❤️《SpringCloud入门实战系列》解锁SpringCloud主流组件入门应用及关键特性。带你了解SpringCloud主流组件,是如何一战解决微服务诸多难题的。项目demo：源码地址👉🏻SpringCloud入门实战系列不迷路👈🏻：SpringCloud入门实战（一）什么是SpringCloud？SpringCloud入门实战

  9. ruby-on-rails - 使用 Rails 在 PaperClip 中文件上传 Base64 编码的字符串 - 2

    我有一个图像文件的base64编码字符串。我需要用回形针保存它我的Controller代码是@driver=User.find(6)encoded_file=Base64.encode64(File.open('/pjt_path/public/test.jpg').read)decoded_file=Base64.decode64(encoded_file)@driver.profile_pic=StringIO.open(decoded_file)@driver.save在我的用户模型中has_attached_file:profile_pic,:styles=>{:medium=

  10. STM32F103C8T6—库函数应用I2C/SPI驱动OLED显示中文、字符串 - 2

    文章目录1.I2C与SPI通信协议对比2.四脚OLED与六脚OLED3.I2C驱动OLED显示oled.h&oled.c：汉字取模&oledfont.h：main.c显示示例：连线方法：4.SPI驱动OLED显示1.I2C与SPI通信协议对比I2C（Inter-IntegratedCircuit）SPI（SerialPeripheralInterface）传输方式半双工全双工传输速度低速，100Kbps----4Mbps高速，30Mbps以上几线制4线制：VCC，GND，SCL，SDA6/7线制：VCC，GND，SCLK(D0)，MOSI(D1/SDA)，DC，CS/SS主从模式多主机总线，通

随机推荐