5个可以加速开发的VueUse函数库_0

button{border:none;大纲：无；右边距：10px；背景色：#2ecc71；白颜色;填充：5px10px;;}VueUse是AnthonyFu的一个开源项目，它为Vue开发者提供了大量用于Vue2和Vue3的基本CompositionAPI实用函数。它有几十种解决方案对于常见的开发人员用例，例如跟踪Ref更改、检测元素可见性、简化常见的Vue模式、键盘/鼠标输入等。这是一种节省开发时间的好方法，因为您不必自己添加所有这些标准功能.我喜欢VueUse库，因为在决定提供哪些实用程序时，它确实将开发人员放在首位，而且它是一个维护良好的库，因为它与当前版本的Vue保持同步。VueUse有哪些实用程序？如果您想查看每个实用程序的完整列表，我绝对建议您查看官方文档。但总结一下，VueUse中有9类函数。动画-包含易于使用的过渡、超时和计时功能。Browser-可用于不同的屏幕控制、剪贴板、首选项等。Component-为不同的组件方法提供速记。格式化程序-提供响应时间格式化功能。传感器-用于监听不同的DOM事件、输入事件和网络事件。状态-管理用户状态（全局、本地存储、会话存储）。Utility-不同的实用函数，如getter、条件、引用同步等。Watch-更高级类型的watchers，如可暂停watchers、backoffwatchers和条件watchers。杂项-针对不同类型事件、WebSocket和WebWorker的功能这些类别中的大多数都包含几个不同的功能，因此VueUse对于您的用例来说是灵活的，并且可以成为快速开始构建Vue应用程序的好地方。在本教程中，我们将了解5个不同的VueUse函数，以便您了解使用这个库是多么容易。但首先，让我们将它添加到我们的Vue项目中！将VueUse安装到你的Vue项目中VueUse最好的特性之一是它只用一个包就同时兼容Vue2和Vue3！安装VueUsenpm或CDNnpmi@vueuse/core#yarnadd@vueuse/core我推荐使用NPM，因为它的用法更容易理解，但是如果我们使用CDN，VueUse会在应用程序中通过window.VueUse访问。对于NPM安装，所有功能都可以通过使用标准对象重构从@vueuse/core访问，就像这样。import{useRefHistory}from'@vueuse/core'好的，现在我们已经安装了VueUse，让我们在我们的应用程序中使用它吧！useRefHistory跟踪对反应数据的更改useRefHistory跟踪对Ref所做的每个更改并将其存储在数组中。这使我们能够轻松地为我们的应用程序提供撤消和重做功能。让我们看一个示例，我们正在构建一个我们希望能够撤消的文本区域。第一步是在没有VueUse的情况下创建我们的基本组件——带有ref、textarea和用于撤消和重做的按钮。button{border:none;大纲：无；右边距：10px；背景色：#2ecc71；白颜色;填充：5px10px;;}然后，让我们通过导入useRefHistory函数来添加VueUse，然后从我们的文字引用中提取历史记录、撤消和重做属性。这就像调用useRefHistory并传递我们的ref一样简单。import{ref}from'vue'import{useRefHistory}from'@vueuse/core'consttext=ref('')const{history,undo,redo}=useRefHistory(text)这将在每次我们的ref改变时完成观察者-更新我们刚刚创建的历史属性。然后，为了让我们真正看到发生了什么，让我们打印出模板内的历史记录，并在单击相应按钮时调用我们的撤消和重做函数。button{border:none;大纲：无；右边距：10px；背景色：#2ecc71；白颜色;填充：5px10px;;}好的，让我们运行这个。当我们键入时，每个字符都会触发历史数组中的一个新条目，如果我们点击撤消/重做，我们会转到相应的条目。还有不同的选项可以为此功能添加更多功能。例如，我们可以深入研究反应对象并限制此类历史条目的数量。const{history,undo,redo}=useRefHistory(text,{deep:true,capacity:10,})请务必查看文档以获取完整的选项列表。onClickOutside关闭模式onClickOutside检测元素外部的任何点击。根据我的经验，此功能最常见的用例是关闭任何模式或弹出窗口。通常，我们希望我们的模态能够阻止页面的其余部分以引起用户的注意并限制错误。但是，如果他们确实在模态之外单击，我们希望它关闭。这只需两步即可完成：为我们要检查的元素创建模板引用使用此模板引用运行onClickOutside这是一个带有使用onClickOutside的弹出窗口的简单组件。button{border:none;大纲：无；右边距：10px；背景色：#2ecc71；白颜色;填充：5px10px;;}.popup{位置：固定；顶部：;左边：;宽度h:100vw;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景：rgba(,,,0.1);}.popup-content{最小宽度：300px；填充：20px；宽度：30%；背景：#fff；}结果是这样的，我们可以使用我们的按钮打开弹出窗口，然后在弹出内容窗口外单击以关闭它useVModel简化了v-model绑定Vue开发人员的一个常见用例是创建自定义v-model组件的绑定。这意味着我们的组件接受一个值作为prop，并且每当该值被修改时，我们的组件都会向父组件发出一个更新事件。useVModel函数将其简化为仅使用标准ref语法。假设我们有一个自定义文本输入，并试图为其文本输入的值创建一个v-model。通常，我们必须接受一个valueprop，然后发出一个change事件来更新父组件中的数据值。我们可以使用useVModel并将其视为普通引用，而不是使用ref并调用props.value和update: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指定更多选项，例如更改其根元素、边距（与用于计算交点的根边界框的偏移量）和阈值级别。const{stop}=useIntersectionObserver(target,([{isIntersecting}],observerElement)=>{targetIsVisible.value=isIntersecting},{//root,rootMargin,threshold,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()}},)useTransitionvalue之间的transitionuseTransition在整个veuse中图书馆我最喜欢的功能之一。它可以让我们在一行内平滑地转换值。我们有一个存储为ref的数字源和一个将在不同值之间调节的输出。例如，假设我们要构建一个计数器，我们可以分三步完成此操作：创建我们的计数引用并将其初始化为零使用useTransition创建一个输出引用（设置持续时间和转换类型）更改计数的值然后，在我们的模板中，我们要显示输出值，因为它在不同值之间平滑过渡。这是结果！我们还可以使用useTransition来转换整个数字数组，这在处理位置或颜色时很有用。使用颜色的一个技巧是使用计算属性将RGB值格式化为正确的颜色语法。进一步自定义的一些很酷的方法是使用任何内置过渡预设或使用CSS缓动函数来定义我们自己的过渡。最后的想法这绝不是VueUse的完整指南，这些只是我发现最有趣的VueUse库中的许多功能。我喜欢所有这些实用函数如何帮助加快开发速度，因为它们中的每一个都旨在解决特定和常见的用例。我很想听听您是如何在自己的项目中实施VueUse的。请在下面留下任何评论。