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

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

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

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

npm i @vueuse/core # yarn add @vueuse/core

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

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

import { useRefHistory } from '@vueuse/core'

useRefHistory 跟踪响应式数据的变化

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

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

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


   
     Undo 
     Redo 
  
  



import { ref } from 'vue'
const text = ref('')



  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }

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

import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'

const text = ref('')
const { history, undo, redo } = useRefHistory(text)

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

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


   
     Undo 
     Redo 
  
  
  
    
      {{ entry }}
    
  



import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'
const text = ref('')
const { history, undo, redo } = useRefHistory(text)



  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }

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

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

const { history, undo, redo } = useRefHistory(text, {
  deep: true,
  capacity: 10,
})

onClickOutside 关闭 modal

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

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

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

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

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


   Open Popup 
  
    
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquid autem reiciendis eius accusamus sequi, ipsam corrupti vel laboriosam necessitatibus sit natus vero sint ullam! Omnis commodi eos accusantium illum?
    
  



import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
const open = ref(false) // state of our popup
const popup = ref() // template ref
// whenever our popup exists, and we click anything BUT it
onClickOutside(popup, () => {
  open.value  = false
})



  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
  .popup {
    position: fixed;
    top: ;
    left: ;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(, , , 0.1);
  }
  .popup-content {
    min-width: 300px;
    padding: 20px;
    width: 30%;
    background: #fff;
  }
 {
        data.value = event.target.value
    }
    return {
        data,
        update
    }
  },
}

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

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


  
     {{ data }} 
    
  



import CustomInput from './components/CustomInput.vue'
import { ref } from 'vue'
export default {
  components: {
    CustomInput,
  },
  setup () {
    const data = ref('hello')
    return {
      data
    }
  }
}

运行结果如下，父方的值总是与子方的输入保持同步：

使用 intersectionobserver 跟踪元素的可见性

当确定两个元素是否重叠时，useIntersectionObserver 是非常强大的。这方面的一个很好的用例是检查一个元素在视口中是否当前可见。

基本上，它检查目标元素与根元素/文档相交的百分比。如果这个百分比超过了某个阈值，它就会调用一个回调，确定目标元素是否可见。

useIntersectionObserver提供了一个简单的语法来使用IntersectionObserver API。我们所需要做的就是为我们想要检查的元素提供一个模板ref。

默认情况下，IntersectionObserver将以文档的视口为根基，阈值为0.1–所以当这个阈值在任何一个方向被越过时，我们的交集观察器将被触发。

示例：我们有一个假的段落，只是在我们的视口中占据了空间，目标元素，然后是一个打印语句，打印我们元素的可见性。



   Is target visible? {{ targetIsVisible }} 
  
    
      Hello world
    
  



import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )
    return {
      target,
      targetIsVisible,
    }
  },
}



.container {
  width: 80%;
  margin:  auto;
  background-color: #fafafa;
  max-height: 300px;
  overflow: scroll;
}
.target {
  margin-top: 500px;
  background-color: #1abc9c;
  color: white;
  padding: 20px;
}

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

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

const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
      {
        // root, rootMargin, threshold, window
        // full options in the source: https://github.com/vueuse/vueuse/blob/main/packages/core/useIntersectionObserver/index.ts
        threshold: 0.5,
      }
)

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

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

const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
        if (isIntersecting) {
          stop()
        }
      },
    )

使用 useTransition 做个数字加载动画

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

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

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

初始化一个 ref 变量 count ，初始值为 0
使用 useTransition 创建一个变量 output
改变 count 的值

import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'

const count = ref(0)

const output = useTransition(count , {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})

count.value = 5000

然后在 template 中显示 output 的值：


   
     Join over 
     {{ Math.round(output) }}+ 
    Developers 
  



import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const count = ref(0)
const output = useTransition(count, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})
count.value = 5000

运行结果：

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


   COLOR CHANGING 



import { ref, computed } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const source = ref([, , ])
const output = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})
const color = computed(() => {
  const [r, g, b] = output.value
  return `rgb(${r}, ${g}, ${b})`
})
source.value = [255, , 255]

总结

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

~完，我去刷碗了，周末不刷碗，晚上跪榴莲。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

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

交流

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

在这里插入图片描述

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

最近更新

热门博客

[ 申请 ]友情链接：