VueUse中的这五个函数，也太好用了吧

VueUse 是 Anthony Fu 大佬的一个开源项目，它为Vue的开发者提供了大量用于 Vue2 和Vue3 的基本 Composition API 实用工具函数。

它有几十个用于常见开发人员用例的解决方案，如跟踪ref更改，检测元素可见性，简化常见Vue模式，键盘/鼠标输入等。 这是真正节省开发时间的好方法，因为我们不必自己亲手添加所有这些标准功能，拿来主义，用就对了(再次感谢大佬的付出)。

我喜欢VueUse库，因为它在决定提供哪些实用工具时真正把开发者放在第一位，而且它是一个维护良好的库，因为它与Vue的当前版本保持同步。

VueUse 有哪些实用方法?

如果你想看到每一个实用程序的完整列表，建议去看看官方文档。但总结一下，VueUse 中有9种类型的函数。

  • Animation(动画) - 包含易于使用的过渡、超时和计时功能
  • Browser (浏览器) - 可以用于不同的屏幕控件、剪贴板、首选项等等
  • Component (组件) - 为不同的组件方法提供简写
  • Sensors (传感器)- 用来监听不同的DOM事件、输入事件和网络事件
  • State (状态) - 管理用户状态(全局，本地存储，会话存储)
  • Utility (实用方法)--不同的实用方法，如getters、conditionals、ref synchronization等。
  • Watch --更高级的观察器类型，如可暂停的观察器、放弃的观察器和条件观察器
  • 其它 - 事件、WebSockets和 Web workers 的不同类型的功能

将 Vueuse 安装到 Vue 项目中

VueUse 的最大特点之一是，它只用一个包就能兼容 Vue2 和 Vue3!

安装VueUse有两种选择：npm或 CDN

 
 
 
 
    
  
  
  
  
  1. npm i @vueuse/core # yarn add @vueuse/core 
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

推荐使用NPM，因为它更容易理解，但如果我们使用CDN, 可能通过 window.VueUse 来访问。

使用 npm，可以通过解构的方式来获得想要的方法：

 
 
 
 
    
  
  
  
  
  1. import { useRefHistory } from '@vueuse/core' 
    2.

useRefHistory 跟踪响应式数据的变化

useRefHistory跟踪对 ref 所做的每一个改变，并将其存储在一个数组中。这样我们能够轻松为应用程序提供撤销和重做功能。

来看一个示例，在该示例中，我们做一个能够撤销的文本区域

第一步是在没有 VueUse 的情况下创建我们的基本组件--使用ref、textarea、以及用于撤销和重做的按钮。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. import { ref } from 'vue' 
    5. 
  
  
  
  
  5. const text = ref('') 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.   button { 
    10. 
  
  
  
  
  10.     border: none; 
    11. 
  
  
  
  
  11.     outline: none; 
    12. 
  
  
  
  
  12.     margin-right: 10px; 
    13. 
  
  
  
  
  13.     background-color: #2ecc71; 
    14. 
  
  
  
  
  14.     color: white; 
    15. 
  
  
  
  
  15.     padding: 5px 10px;; 
    16. 
  
  
  
  
  16.   } 
    17. 
  
  
  
  
  17.  
    18.

接着，导入useRefHistory，然后通过 useRefHistory从 text 中提取history、undo和redo属性。

 
 
 
 
    
  
  
  
  
  1. import { ref } from 'vue' 
    2. 
  
  
  
  
  2. import { useRefHistory } from '@vueuse/core' 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. const text = ref('') 
    5. 
  
  
  
  
  5. const { history, undo, redo } = useRefHistory(text) 
    6.

每当我们的ref发生变化，更新history属性时，就会触发一个监听器。

为了看看底层做了什么，我们把 history 内容打印出来。并在单击相应按钮时调用 undo 和redo函数。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. import { ref } from 'vue' 
    5. 
  
  
  
  
  5. import { useRefHistory } from '@vueuse/core' 
    6. 
  
  
  
  
  6. const text = ref('') 
    7. 
  
  
  
  
  7. const { history, undo, redo } = useRefHistory(text) 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.   button { 
    12. 
  
  
  
  
  12.     border: none; 
    13. 
  
  
  
  
  13.     outline: none; 
    14. 
  
  
  
  
  14.     margin-right: 10px; 
    15. 
  
  
  
  
  15.     background-color: #2ecc71; 
    16. 
  
  
  
  
  16.     color: white; 
    17. 
  
  
  
  
  17.     padding: 5px 10px;; 
    18. 
  
  
  
  
  18.   } 
    19. 
  
  
  
  
  19.  
    20.

直接，跑起来，效果如下：

还有不同的选项，为这个功能增加更多的功能。例如，我们可以深入追踪 reactive 对象，并像这样限制 history 记录的数量。

 
 
 
 
    
  
  
  
  
  1. const { history, undo, redo } = useRefHistory(text, { 
    2. 
  
  
  
  
  2.   deep: true, 
    3. 
  
  
  
  
  3.   capacity: 10, 
    4. 
  
  
  
  
  4. }) 
    5.

onClickOutside 关闭 modal

onClickOutside 检测在一个元素之外的任何点击。根据我的经验，这个功能最常见的使用情况是关闭任何模态或弹出窗口。

通常，我们希望我们的模态屏蔽网页的其余部分，以吸引用户的注意和限制错误。然而，如果他们确实点击了模态之外，我们希望它关闭。

要做到这一点，只有两个步骤。

  • 为要检测的元素创建一个模板引用
  • 使用这个模板ref运行onClickOutside

这是一个简单的组件，使用onClickOutside弹出窗口。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. import { ref } from 'vue' 
    5. 
  
  
  
  
  5. import { onClickOutside } from '@vueuse/core' 
    6. 
  
  
  
  
  6. const open = ref(false) // state of our popup 
    7. 
  
  
  
  
  7. const popup = ref() // template ref 
    8. 
  
  
  
  
  8. // whenever our popup exists, and we click anything BUT it 
    9. 
  
  
  
  
  9. onClickOutside(popup, () => { 
    10. 
  
  
  
  
  10.   open.value  = false 
    11. 
  
  
  
  
  11. }) 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.   button { 
    16. 
  
  
  
  
  16.     border: none; 
    17. 
  
  
  
  
  17.     outline: none; 
    18. 
  
  
  
  
  18.     margin-right: 10px; 
    19. 
  
  
  
  
  19.     background-color: #2ecc71; 
    20. 
  
  
  
  
  20.     color: white; 
    21. 
  
  
  
  
  21.     padding: 5px 10px;; 
    22. 
  
  
  
  
  22.   } 
    23. 
  
  
  
  
  23.   .popup { 
    24. 
  
  
  
  
  24.     position: fixed; 
    25. 
  
  
  
  
  25.     top: ; 
    26. 
  
  
  
  
  26.     left: ; 
    27. 
  
  
  
  
  27.     width: 100vw; 
    28. 
  
  
  
  
  28.     height: 100vh; 
    29. 
  
  
  
  
  29.     display: flex; 
    30. 
  
  
  
  
  30.     align-items: center; 
    31. 
  
  
  
  
  31.     justify-content: center; 
    32. 
  
  
  
  
  32.     background: rgba(, , , 0.1); 
    33. 
  
  
  
  
  33.   } 
    34. 
  
  
  
  
  34.   .popup-content { 
    35. 
  
  
  
  
  35.     min-width: 300px; 
    36. 
  
  
  
  
  36.     padding: 20px; 
    37. 
  
  
  
  
  37.     width: 30%; 
    38. 
  
  
  
  
  38.     background: #fff; 
    39. 
  
  
  
  
  39.   } 
    40. 
  
  
  
  
  40.

结果是这样的，我们可以用我们的按钮打开弹出窗口，然后在弹出内容窗口外单击关闭它。

useVModel 简化 v-model 的绑定。

Vue开发者的一个常见用例是为一个组件创建一个自定义的v-model绑定。这也要求我们的组件接受一个 value 作为 prop，每当这个 value 被修改，我们的组件就会向父类发出一个 update 事件。

useVModel函数将其简化为只使用标准的ref语法。假设我们有一个自定义的文本输入，试图为其文本输入的值创建一个v-model。通常情况下，我们必须接受一个 value的 prop，然后发出一个 change事件来更新父组件中的数据值。

我们可以使用useVModel，把它当作一个普通的ref，而不是使用ref并调用props.value和update:value。这有助于减少我们需要记住的不同语法的数量!

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

每当需要访问value时，我们只需调用.value，useVModel将从我们的组件 props 中给我们提供值。而每当改变对象的值时，useVModel 会向父组件发出一个更新事件。

下面是父组件的一个简单示例

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. .container { 
    7. 
  
  
  
  
  7.   width: 80%; 
    8. 
  
  
  
  
  8.   margin:  auto; 
    9. 
  
  
  
  
  9.   background-color: #fafafa; 
    10. 
  
  
  
  
  10.   max-height: 300px; 
    11. 
  
  
  
  
  11.   overflow: scroll; 
    12. 
  
  
  
  
  12. } 
    13. 
  
  
  
  
  13. .target { 
    14. 
  
  
  
  
  14.   margin-top: 500px; 
    15. 
  
  
  
  
  15.   background-color: #1abc9c; 
    16. 
  
  
  
  
  16.   color: white; 
    17. 
  
  
  
  
  17.   padding: 20px; 
    18. 
  
  
  
  
  18. } 
    19. 
  
  
  
  
  19.  
    20.

运行后，对应的值会更新：

我们还可以为我们的 Intersection Observer 指定更多的选项，比如改变它的根元素、边距(计算交叉点时对根的边界框的偏移)和阈值水平。

 
 
 
 
    
  
  
  
  
  1. const { stop } = useIntersectionObserver( 
    2. 
  
  
  
  
  2.       target, 
    3. 
  
  
  
  
  3.       ([{ isIntersecting }], observerElement) => { 
    4. 
  
  
  
  
  4.         targetIsVisible.value = isIntersecting 
    5. 
  
  
  
  
  5.       }, 
    6. 
  
  
  
  
  6.       { 
    7. 
  
  
  
  
  7.         // root, rootMargin, threshold, window 
    8. 
  
  
  
  
  8.         // full options in the source: https://github.com/vueuse/vueuse/blob/main/packages/core/useIntersectionObserver/index.ts 
    9. 
  
  
  
  
  9.         threshold: 0.5, 
    10. 
  
  
  
  
  10.       } 
    11. 
  
  
  
  
  11. ) 
    12.

同样重要的是，这个方法返回一个 stop 函数，我们可以调用这个函数来停止观察交叉点。如果我们只想追踪一个元素在屏幕上第一次可见的时候，这就特别有用。

在这段代码中，一旦targetIsVisible被设置为true，observer 就会停止，即使我们滚动离开目标元素，我们的值也会保持为 true 。

 
 
 
 
    
  
  
  
  
  1. const { stop } = useIntersectionObserver( 
    2. 
  
  
  
  
  2.       target, 
    3. 
  
  
  
  
  3.       ([{ isIntersecting }], observerElement) => { 
    4. 
  
  
  
  
  4.         targetIsVisible.value = isIntersecting 
    5. 
  
  
  
  
  5.         if (isIntersecting) { 
    6. 
  
  
  
  
  6.           stop() 
    7. 
  
  
  
  
  7.         } 
    8. 
  
  
  
  
  8.       }, 
    9. 
  
  
  
  
  9.     ) 
    10.

使用 useTransition 做个数字加载动画

useTransition是整个VueUse库中我最喜欢的函数之一。它允许我们只用一行就能顺利地在数值之间进行过渡。

如果使用 useTransition 做一个下面这样的效果，要怎么做呢?

我们可以通过三个步骤来做到这一点。

  • 初始化一个 ref 变量 count ，初始值为 0
  • 使用 useTransition 创建一个变量 output
  • 改变 count 的值
 
 
 
 
    
  
  
  
  
  1. import { ref } from 'vue' 
    2. 
  
  
  
  
  2. import { useTransition, TransitionPresets } from '@vueuse/core' 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. const count = ref(0) 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. const output = useTransition(count , { 
    7. 
  
  
  
  
  7.   duration: 3000, 
    8. 
  
  
  
  
  8.   transition: TransitionPresets.easeOutExpo, 
    9. 
  
  
  
  
  9. }) 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. count.value = 5000 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.  
    14.

然后在 template 中显示 output 的值：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. import { ref } from 'vue' 
    5. 
  
  
  
  
  5. import { useTransition, TransitionPresets } from '@vueuse/core' 
    6. 
  
  
  
  
  6. const count = ref(0) 
    7. 
  
  
  
  
  7. const output = useTransition(count, { 
    8. 
  
  
  
  
  8.   duration: 3000, 
    9. 
  
  
  
  
  9.   transition: TransitionPresets.easeOutExpo, 
    10. 
  
  
  
  
  10. }) 
    11. 
  
  
  
  
  11. count.value = 5000 
    12. 
  
  
  
  
  12.  
    13.

运行结果：

我们还可以使用useTransition 转换整个数字数组。 使用位置或颜色时，这非常有用。 使用颜色的一个很好的技巧是使用计算的属性将RGB值格式化为正确的颜色语法。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. import { ref, computed } from 'vue' 
    5. 
  
  
  
  
  5. import { useTransition, TransitionPresets } from '@vueuse/core' 
    6. 
  
  
  
  
  6. const source = ref([, , ]) 
    7. 
  
  
  
  
  7. const output = useTransition(source, { 
    8. 
  
  
  
  
  8.   duration: 3000, 
    9. 
  
  
  
  
  9.   transition: TransitionPresets.easeOutExpo, 
    10. 
  
  
  
  
  10. }) 
    11. 
  
  
  
  
  11. const color = computed(() => { 
    12. 
  
  
  
  
  12.   const [r, g, b] = output.value 
    13. 
  
  
  
  
  13.   return `rgb(${r}, ${g}, ${b})` 
    14. 
  
  
  
  
  14. }) 
    15. 
  
  
  
  
  15. source.value = [255, , 255] 
    16. 
  
  
  
  
  16.  
    17.

总结

这不是VueUse的完整指南。这些只是我平常比较常用的函数，还有很多好用的函数，大家可以自行到官网去学习使用。

作者：Matt Maribojoc 译者：前端小智 来源：medium

原文：https://learvue.co/2021/07/5-vueuse-library-functions-that-can-speed-up-development/

当前文章：VueUse中的这五个函数，也太好用了吧
文章网址：http://www.shufengxianlan.com/qtweb/news23/310823.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

同城分类信息

小谭建站工作室　　 　乐山主机托管　　 　成都网站制作　　 　网站建设公司　　 　VI设计　　 　宜宾冠赛网站　　 　珉田数据中心　　 　响应式建站　　 　成都纯水机　　 　绵阳服务器托管　　 　胜锦安防科技　　 　汕尾凯敏网站　　 　虚拟主机购买　　 　品牌网站建设　　 　王君美油画　　 　网站SEO优化　　 　雅安网站建设　　 　网站排名　　 　大足网站建设　　 　seo优化