VueUse中的这5个功能太好用了

button{border:none;大纲：无；右边距：10px；背景色：#2ecc71；白颜色;填充：5px10px;;}作者：MattMaribojoc译者：前端小智来源：medium有梦想，有干货，微信搜索【大千世界】关注这个还在刷碗刷碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。VueUse是AnthonyFu的一个开源项目，它为Vue开发者提供了大量适用于Vue2和Vue3的基础CompositionAPI实用函数。它为常见的开发人员用例提供了数十种解决方案，例如跟踪引用更改、检测元素可见性、简化常见的Vue模式、键盘/鼠标输入等。这是一种节省开发时间的好方法，因为我们不必添加所有这些标准功能都是我们自己的，只需使用它（再次感谢大佬们）。我喜欢VueUse库，因为在决定提供哪些实用程序时，它确实将开发人员放在首位，而且它是一个维护良好的库，因为它与当前版本的Vue保持同步。VueUse有哪些实用方法？如果您想查看每个实用程序的完整列表，建议查看官方文档。但总结一下，VueUse中有9类函数。动画（animation）——包含易于使用的过渡、超时和计时功能浏览器（browser）——可用于不同的屏幕控制、剪贴板、首选项等组件（component）——提供不同组件方法的简写方式传感器（Sensor)——用来监听不同的DOM事件、输入事件和网络事件State（状态）——管理用户状态（全局、本地存储、会话存储）ETC。观察——更高级的观察者类型，如可暂停观察者、放弃观察者和条件观察者杂项——事件、WebSockets和网络工作者的不同类型的功能首先，它仅通过一个包就与Vue2和Vue3兼容！安装VueUse有两个选项：npm或CDNnpmi@vueuse/core#yarnadd@vueuse/core推荐使用npm，因为更容易理解，但是如果我们使用CDN，可能会通过window.VueUse访问。使用npm，你可以通过解构得到想要的方法：import{useRefHistory}from'@vueuse/core'useRefHistory跟踪响应数据的变化useRefHistory跟踪对ref所做的每一个变化，并将其存储在数组中。这使我们能够轻松地为应用程序提供撤消和重做功能。让我们看一个示例，其中我们制作了一个可撤销的文本区域。第一步是在没有VueUse的情况下创建我们的基本组件——使用ref、textarea和用于撤消和重做的按钮。button{border:none;大纲：无；右边距：10px；背景色：#2ecc71；白颜色;填充：5px10px;;}接下来，导入useRefHistory，然后使用useRefHistory从文本中提取历史、撤消和重做属性。import{ref}from'vue'import{useRefHistory}from'@vueuse/core'consttext=ref('')const{history,undo,redo}=useRefHistory(text)每当我们的ref改变时，更新history属性，一个侦听器被触发。为了了解幕后发生的事情，我们打印出历史内容。并在点击相应的按钮时调用撤销和重做函数。button{border:none;大纲：无；右边距：10px；背景色：#2ecc71；白颜色;填充：5px10px;;}直接，运行一下，效果如下：有不同的选项，给这个函数增加更多的功能。比如我们可以对反应对象进行下钻，像这样限制历史记录的条数。const{history,undo,redo}=useRefHistory(text,{deep:true,capacity:10,})onClickOutsideoffmodalonClickOutside检测元素外部的任何点击。根据我的经验，此功能最常见的用例是关闭任何模式或弹出窗口。通常，我们希望我们的模式能够阻止网页的其余部分，以引起用户的注意并限制错误。但是，如果他们确实在模态之外单击，我们希望它关闭。要做到这一点，只有两个步骤。为要检查的元素创建模板引用使用此模板引用运行onClickOutside这是一个使用onClickOutside弹出窗口的简单组件。button{border:none;大纲：无；右边距：10px；背景色：#2ecc71；白颜色;填充：5px10px;;}.popup{位置：固定；顶部：;左边：;宽度h:100vw;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景：rgba(,,,0.1);}.popup-content{最小宽度：300px；填充：20px；宽度：30%；背景：#fff；}

每当我们需要访问value时，我们只需调用.value并且useVModel将从我们的组件道具中给我们价值。并且每当对象的值发生变化时，useVModel都会向父组件发送一个更新事件。下面是父组件的一个简单示例import{ref}from'vue'import{useIntersectionObserver}from'@vueuse/core'exportdefault{setup(){consttarget=ref(null)consttargetIsVisible=ref(false)const{stop}=useIntersectionObserver(target,([{isIntersecting}],observerElement)=>{targetIsVisible.value=isIntersecting},)return{target,targetIsVisible,}},}.container{宽度：80%;保证金：自动；背景色：#fafafa；最大高度：300px；溢出：滚动；}.target{margin-top:500px;背景色：#1abc9c；;padding:20px;}运行后，相应的值会更新：我们还可以为我们的IntersectionObserver指定更多的选项，比如改变它的根元素，边距（计算交点时与根边界框的偏移）和阈值水平,window//源代码中的完整选项：https://github.com/vueuse/vueuse/blob/main/packages/core/useIntersectionObserver/index.tsthreshold:0.5,})同样重要的是，此方法返回一个停止函数我们可以调用它来停止观察交叉路口。如果我们只想跟踪元素何时首次出现在屏幕上，这将特别有用。在此代码中，一旦targetIsVisible设置为true，观察器就会停止，即使我们滚动离开目标元素，我们的值仍然为true。const{stop}=useIntersectionObserver(target,([{isIntersecting}],observerElement)=>{targetIsVisible.value=isIntersectingif(isIntersecting){stop()}},)使用useTransition制作数字加载动画useTransition是整个VueUse库我最喜欢的函数之一。它可以让我们仅用一行就可以在值之间平滑过渡。如果你用useTransition做一个像下面这样的效果，你是怎么做到的？我们可以分三步完成。初始化一个ref变量count，初始值为0使用useTransition创建一个变量output改变count的值import{ref}from'vue'import{useTransition,TransitionPresets}from'@vueuse/core'constcount=ref(0)constoutput=useTransition(count,{duration:3000,transition:TransitionPresets.easeOutExpo,})count.value=5000然后在模板中显示输出值：操作结果：我们还可以使用useTransition来转换整个数字数组。这在处理位置或颜色时非常有用。使用颜色的一个很好的技巧是使用计算属性将RGB值格式化为正确的颜色语法。总结这不是VueUse的完整指南.这些只是我平时使用比较频繁的功能，还有很多好用的功能，大家可以去官网自己学习使用。~终于要洗碗了，周末不洗碗，晚上跪榴莲。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://learvue.co/2021/07/5-...交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。