乐趣区

关于javascript:5-个可以加速开发的-VueUse-函数库

jiezi

VueUse 是 Anthony Fu 的一个开源我的项目，它为 Vue 开发人员提供了大量实用于 Vue 2 和 Vue 3 的根本 Composition API 实用程序函数。

它有几十个解决方案，实用于常见的开发者用例，如跟踪 Ref 变动、检测元素可见性、简化常见的 Vue 模式、键盘 / 鼠标输出等。这是一个真正节俭开发工夫的好办法，因为你不用本人增加所有这些规范性能。

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

VueUse 有哪些实用程序？

如果你想看到每一个实用程序的残缺列表，我相对倡议你去看看官网文档。但总结一下，VueUse 中有 9 种类型的函数。

  1. Animation——蕴含易于应用的过渡、超时和计时性能。
  2. Browser——可用于不同的屏幕管制、剪贴板、偏好等。
  3. Component——提供了不同组件办法的简写。
  4. Formatters——提供响应工夫格式化性能。
  5. Sensors——用来监听不同的 DOM 事件、输出事件和网络事件。
  6. State——治理用户状态（全局、本地存储、会话存储）。
  7. Utility——不同的实用函数，如 getter、条件、援用同步等。
  8. Watch——更多高级类型的观察器，如可暂停的观察器、退却的观察器和条件观察器。
  9. Misc——不同类型的事件、WebSockets 和 web workers 的性能

这些类别中的大多数都蕴含几个不同的性能，所以 VueUse 对于你的应用状况来说是很灵便的，能够作为一个很好的中央来疾速开始构建 Vue 应用程序。

在本教程中，咱们将看一下 5 个不同的 VueUse 函数，这样你就能够理解在这个库中工作是如许容易。

但首先，让咱们将其增加到 Vue 我的项目中！

将 VueUse 装置到你的 Vue 我的项目中

VueUse 的最大特点之一是，它只用一个软件包就能同时兼容 Vue 2 和 Vue 3！

装置 VueUse 有两种抉择 npm 或 CDN

npm i @vueuse/core # yarn add @vueuse/core
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

我倡议应用 NPM，因为它应用法更容易了解，但如果咱们应用 CDN，VueUse 将在应用程序中通过 window.VueUse 拜访。

对于 NPM 的装置，所有的性能都能够通过应用规范的对象重构从 @vueuse/core 中导入，像这样拜访。

import {useRefHistory} from '@vueuse/core'

好了，当初咱们曾经装置了 VueUse，让咱们在应用程序中应用它！

useRefHistory 跟踪响应式数据的更改

useRefHistory 跟踪对 Ref 所做的每一个扭转，并将其存储在一个数组中。这使咱们可能轻松地为咱们的应用程序提供撤销和重做性能。

让咱们看一个示例，其中咱们正在构建一个咱们心愿可能吊销的文本区域。

第一步是在不应用 VueUse 的状况下创立咱们的根本组件——应用 ref、textarea 和用于吊销和重做的按钮。

<template>
  <p> 
    <button> Undo </button>
    <button> Redo </button>
  </p>
  <textarea v-model="text"/>
</template>

<script setup>
import {ref} from 'vue'
const text = ref('')
</script>

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

而后，让咱们通过导入 useRefHistory 函数，而后从咱们的文本 ref 中提取 history、undo 和 redo 属性来增加 VueUse。这就像调用 useRefHistory 并传递咱们的 ref 一样简略。

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

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

每次咱们的 ref 更改时，这都会触发一个观察者——更新咱们刚刚创立的 history 属性。

而后，为了让咱们能真正看到产生了什么，让咱们打印出模板内的历史记录，同时在点击相应的按钮时调用咱们的 undo 和 redo 函数。

<template>
  <p> 
    <button @click="undo"> Undo </button>
    <button @click="redo"> Redo </button>
  </p>
  <textarea v-model="text"/>
  <ul>
    <li v-for="entry in history" :key="entry.timestamp">
      {{entry}}
    </li>
  </ul>
</template>

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

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

好的，让咱们运行它。当咱们输出时，每个字符都会触发历史数组中的一个新条目，如果咱们点击 undo/redo，咱们会转到相应的条目。

还有不同的选项能够为此性能增加更多功能。例如，咱们能够深刻跟踪反馈对象并限度这样的历史条目标数量。

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

无关残缺的选项清单，请务必查看文档。

onClickOutside 敞开模态

onClickOutside 检测在一个元素之外的任何点击。依据我的教训，这个性能最常见的应用状况是敞开任何模式或弹出窗口。

通常状况下，咱们心愿咱们的模态挡住网页的其余局部，以吸引用户的注意力并限度谬误。然而，如果他们真的点击了模态之外的内容，咱们心愿它可能敞开。

只需两个步骤即可实现此操作：

  1. 为咱们要检测的元素创立一个模板援用
  2. 应用此模板援用运行 onClickOutside

这是一个应用 onClickOutside 的带有弹出窗口的简略组件。

<template>
  <button @click="open = true"> Open Popup </button>
  <div class="popup" v-if='open'>
    <div class="popup-content" ref="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?
    </div>
  </div>
</template>

<script setup>
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})
</script>

<style scoped>
  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;
  }
</style>

后果是这样的，咱们能够用咱们的按钮关上弹出窗口，而后在弹出内容窗口外点击敞开它。

useVModel 简化了 v-model 绑定

Vue 开发人员的一个常见用例是为组件创立自定义 v-model 绑定。这意味着咱们的组件承受一个值作为 prop，并且每当该值被批改时，咱们的组件都会向父级收回更新事件。

useVModel 函数将其简化为只应用规范的 ref 语法。假如咱们有一个自定义的文本输出，试图为其文本输出的值创立一个 v-model。通常状况下，咱们必须承受一个值的 prop，而后emit 一个变动事件来更新父组件中的数据值。

咱们能够应用 useVModel，把它当作一个一般的 ref，而不是应用 ref 并调用 props.value 和 update:value。这有助于缩小咱们须要记住的不同语法的数量！

<template>
  <div>
    <input 
           type="text" 
           :value="data"
           @input="update"
           />
  </div>
</template>

<script>
import {useVModel} from '@vueuse/core'
export default {props: ['data'],
  setup(props, { emit}) {const data = useVModel(props, 'data', emit)
    console.log(data.value) // equal to props.data
    data.value = 'name' // equal to emit('update:data', 'name')
    const update = (event) => {data.value = event.target.value}
    return {
        data,
        update
    }
  },
}
</script>

每当咱们须要拜访咱们的值时，咱们只需调用 .value，useVModel 将从咱们的组件 props 中给咱们提供值。而每当咱们扭转对象的值时，useVModel 会向父组件 收回一个更新事件。

上面是一个疾速的例子，阐明该父级组件可能是什么样子 …

<template>
  <div>
    <p> {{data}} </p>
    <custom-input 
      :data="data" 
      @update:data="data = $event"
    />
  </div>
</template>

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

后果看起来像这样，咱们在父级中的值始终与子级中的输出放弃同步。

应用 IntersectionObserver 跟踪元素可见性

在确定两个元素是否重叠时，Intersection Observers 十分弱小。一个很好的用例是查看元素以后是否在视口中可见。

实质上，它查看指标元素与根元素 / 文档相交的百分比。如果该百分比超过某个阈值，它会调用一个回调来确定指标元素是否可见。

useIntersectionObserver 提供了一个简略的语法来应用 IntersectionObserver API。咱们所须要做的就是为咱们想要查看的元素提供一个模板 ref。默认状况下，IntersectionObserver 将以文档的视口为根基，阈值为0.1——所以当这个阈值在任何一个方向被越过时，咱们的交加观察器将被触发。

这个例子的代码可能是这样的：咱们有一个假的段落，只是在咱们的视口中占据了空间，咱们的指标元素，而后是一个打印语句，打印咱们元素的可见性。

<template>
  <p> Is target visible? {{targetIsVisible}} </p>
  <div class="container">
    <div class="target" ref="target">
      <h1>Hello world</h1>
    </div>
  </div>
</template>

<script>
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,
    }
  },
}
</script>

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

当咱们运行并滚动它时，咱们会看到它正确地更新了。

咱们还能够为 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，观察者就会进行，即便咱们滚动来到指标元素，咱们的值也会放弃为true。

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

useTransition 在值之间过渡

useTransition 是整个 veuse 库中我最喜爱的函数之一。它容许咱们在一行内平滑地转换数值。

咱们有一个存储为 ref 的数字源和一个将在不同数值之间弛缓的输入。例如，假如咱们想建设一个计数器

咱们能够通过三个步骤来做到这一点：

  • 创立咱们的 count ref 并将其初始化为零
  • 应用 useTransition 创立 output ref(设置持续时间和转换类型)
  • 更改 count 的值
<script setup>
import {ref} from 'vue'
import {useTransition, TransitionPresets} from '@vueuse/core'

const source = ref(0)

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

source.value = 5000

</script>

而后，在咱们的模板中，咱们心愿显示 output 的值，因为它能够在不同值之间平滑过渡。

<template>
  <h2> 
    <p> Join over </p>
    <p> {{Math.round(output) }}+ </p>
    <p>Developers </p>
  </h2>
</template>

<script setup>
import {ref} from 'vue'
import {useTransition, TransitionPresets} from '@vueuse/core'
const source = ref()
const output = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})
source.value = 5000
</script>

这就是后果！

咱们还能够应用 useTransition 来过渡整个数字数组，这在解决地位或色彩时很有用。解决色彩的一个绝招是应用一个计算属性将 RGB 值格式化为正确的色彩语法。

<template>
  <h2 :style="{color: color}"> COLOR CHANGING </h2>
</template>

<script setup>
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]
</script>

一些进一步定制的酷办法是应用任何内置的过渡预设或应用 CSS 缓动函数来定义咱们本人的过渡。

最初的想法

这绝不是 VueUse 的残缺指南，这些只是我发现 VueUse 库中最乏味的许多函数。

我喜爱所有这些实用功能对放慢开发速度的帮忙，因为它们中的每一个都是为了解决具体而又常见的用例。

我很想听听你是如何在本人的我的项目中施行 VueUse 的。请在上面留下任何评论。

退出移动版