关于javascript:我常用的几个-VueUse-最佳组合推荐给你们

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

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

Vueuse 领有大量杰出的组合。然而量太大，要把它们全副看完可能会让人抓不到重点。上面来介绍一些有用到的组合，它们如下：

onClickOutside
useFocusTrap
useHead
useStorage
useVModel
useImage
useDark

检测点击非常简单。然而，当点击产生在一个元素之外时，如何检测？那就有点辣手了。但应用 VueUse 中的 onClickOutside 组件就很容易能做到这点。代码如下：

<script setup>
import {ref} from 'vue'
import {onClickOutside} from '@vueuse/core'

const container = ref(null)
onClickOutside(container, () => alert('Good. Better to click outside.'))
</script>

<template>
  <div>
    <p>Hey there, here's some text.</p>
    <div class="container" ref="container">
      <p>Please don't click in here.</p>
    </div>
  </div>
</template>

为想要追踪的 container 元素创立一个 ref :

const container = ref(null);

而后咱们用元素上的 ref 属性把它变成一个模板ref。

<div class="container" ref="container">
  <p>Please don't click in here.</p>
</div>

有了容器的 ref 之后，咱们把它和一个处理程序一起传递给onClickOutside 组合。

onClickOutside(
  container,
  () => alert('Good. Better to click outside.')
)

这种可组合对于治理窗口或下拉菜单很有用。当用户点击下拉菜单以外的中央时，你能够敞开它。

模态框也通常体现出这种行为。

事例地址：https://stackblitz.com/edit/v…

为了领有可拜访的应用程序，正确地治理焦点十分重要。

没有什么比不小心在模态前面加 tab，并且无奈将焦点返回到模态更蹩脚的了。这就是焦点陷阱的作用。

将键盘焦点锁定在一个特定的 DOM 元素上，不是在整个页面中循环，而是在浏览器自身中循环，键盘焦点只在该 DOM 元素中循环。

上面是一个应用 VueUse 的 useFocusTrap 的例子：

<script setup>
import {ref} from 'vue'
import {useFocusTrap} from '@vueuse/integrations/useFocusTrap'

const container = ref(null)
useFocusTrap(container, { immediate: true})
</script>

<template>
  <div>
    <button tab-index="-1">Can't click me</button>
    <div class="container" ref="container">
      <button tab-index="-1">Inside the trap</button>
      <button tab-index="-1">Can't break out</button>
      <button tab-index="-1">Stuck here forever</button>
    </div>
    <button tab-index="-1">Can't click me</button>
  </div>
</template>

将 immediate 设置为true，页面加载时，焦点将被搁置在 container 元素中。而后，就不可能在该容器之外的中央做标签。

达到第三个按钮后，再次点击 tab 键将回到第一个按钮。

就像 onClickOutside 一样，咱们首先为 container 设置了模板ref。

const container = ref(null)

<div class="container" ref="container">
  <button tab-index="-1">Inside the trap</button>
  <button tab-index="-1">Can't break out</button>
  <button tab-index="-1">Stuck here forever</button>
</div>

而后咱们把这个模板援用传递给 useFocusTrap 组合。

useFocusTrap(container, { immediate: true});

immediate 选项将主动把焦点设置到容器内第一个可关注的元素上。

事例地址：https://stackblitz.com/edit/v…

VueUse 为咱们提供了一种简略的办法来更新咱们应用程序的 head 局部 – 页面 title、scripts 和其余可能放在这里的的货色。

useHead 组合要求咱们首先设置一个插件

import {createApp} from 'vue'
import {createHead} from '@vueuse/head'
import App from './App.vue'

const app = createApp(App)
const head = createHead()

app.use(head)
app.mount('#app')

一旦咱们应用了这个插件，咱们就能够得心应手地更新题目局部。在这个例子中，咱们将在一个按钮上注入一些自定义款式。

<script setup>
import {ref} from 'vue'
import {useHead} from '@vueuse/head'

const styles = ref('')
useHead({
  // Inject a style tag into the head
  style: [{children: styles}],
})

const injectStyles = () => {styles.value = 'button { background: red}'
}
</script>

<template>
  <div>
    <button @click="injectStyles">Inject new styles</button>
  </div>
</template>

首先，咱们创立一个 ref 来示意咱们要注入的款式，默认为空：

const styles = ref('');

第二，设置 useHead 将款式注入到页面中。

useHead({
  // Inject a style tag into the head
  style: [{children: styles}],
})

而后，增加注入这些款式的办法:

const injectStyles = () => {styles.value = 'button { background: red}'
}

当然，咱们并不局限于注入款式。咱们能够在咱们的 <head> 中增加任何这些内容:

title
meta tags
link tags
base tag
style tags
script tags
html attributes
body attributes

事例地址：https://stackblitz.com/edit/v…

useStorage真的很酷，因为它会主动将 ref 同步到 localstorage，事例如下：

<script setup>
import {useStorage} from '@vueuse/core'
const input = useStorage('unique-key', 'Hello, world!')
</script>

<template>
  <div>
    <input v-model="input" />
  </div>
</template>

第一次加载时，input 显示 ‘Hello, world!’，但最初，它会显示你最初在 input 中输出的内容，因为它被保留在 localstorage 中。

除了 localstorage，咱们也能够指定 sessionstorage:

const input = useStorage('unique-key', 'Hello, world!', sessionStorage)

当然，也能够本人实现存储系统，只有它实现了 StorageLike 接口。

export interface StorageLike {getItem(key: string): string | null
  setItem(key: string, value: string): void
  removeItem(key: string): void
}

v-model指令是很好的语法糖，使双向数据绑定更容易。

但 useVModel 更进一步，解脱了一堆没有人真正想写的模板代码。

<script setup>
import {useVModel} from '@vueuse/core'

const props = defineProps({count: Number,})
const emit = defineEmits(['update:count'])

const count = useVModel(props, 'count', emit)
</script>

<template>
  <div>
    <button @click="count = count - 1">-</button>
    <button @click="count = 0">Reset to 0</button>
    <button @click="count = count + 1">+</button>
  </div>
</template>

在这个例子中，咱们首先定义了要附加到 v-model 上的 props:

const props = defineProps({count: Number,})

而后咱们收回一个事件，应用 v-model 的命名常规update:<propName>:

const emit = defineEmits(['update:count'])

当初，咱们能够应用 useVModel 组合来将 prop和事件绑定到一个ref。

const count = useVModel(props, 'count', emit)

每当 prop 发生变化时，这个 count 就会扭转。但只有它从这个组件中被扭转，它就会收回 update:count 事件，通过 v-model 指令触发更新。

咱们能够像这样应用这个 Input 组件。

<script setup>
import {ref} from 'vue'
import Input from './components/Input.vue'

const count = ref(50)
</script>

<template>
  <div>
    <Input v-model:count="count" />
    {{count}}
  </div>
</template>

这里的 count ref 是通过 v-model 绑定与 Input组件外部的 count ref 同步的。

事例地址：https://stackblitz.com/edit/v…

随着工夫的推移，web 利用中的图像变得越来越丑陋。咱们曾经有了带有 srcset 的响应式图像，渐进式加载库，以及只有在图像滚动到视口时才会加载的库。

但你晓得吗，咱们也能够拜访图像自身的加载和谬误状态？

我以前次要通过监听每个 HTML 元素收回的 onload 和onerror事件来做到这一点，但 VueUse 给咱们提供了一个更简略的办法，那就是 useImage 组合。

<script setup>
import {useImage} from '@vueuse/core'

// Change this to a non-existent URL to see the error state
const url = 'https://source.unsplash.com/random/400x300'
const {isLoading, error} = useImage(
  {src: url,},
  {
    // Just to show the loading effect more clearly
    delay: 2000,
  }
)
</script>

<template>
  <div>
    <div v-if="isLoading" class="loading gradient"></div>
    <div v-else-if="error">Couldn't load the image :(</div>
    <img v-else :src="url" />
  </div>
</template>

第一步，通过useImage 设置图片的src:

const {isLoading, error} = useImage({src: url})

获取它返回的 isLoading 和error援用，以便跟踪状态。这个组合在外部应用useAsyncState，因而它返回的值与该组合的值雷同。

安顿好后，useImage 就会加载咱们的图像并将事件处理程序附加到它下面。

咱们所要做的就是在咱们的模板中应用雷同的 URL 来应用该图片。因为浏览器会重复使用任何缓存的图片，它将重复使用由 useImage 加载的图片。

<template>
  <div>
    <div v-if="isLoading" class="loading gradient"></div>
    <div v-else-if="error">Couldn't load the image :(</div>
    <img v-else :src="url" />
  </div>
</template>

在这里，咱们设置了一个根本的加载和谬误状态处理程序。当图片正在加载时，咱们显示一个带有动画突变的占位符。如果有谬误，咱们显示一个错误信息。否则咱们能够渲染图像。

UseImage 还有其余一些很棒的个性! 如果想让它成为响应式图像，那么它反对 srcset 和sizes属性，这些属性在幕后传递给 img 元素。

如果你想把所有内容都放在模板中，还有一个无渲染组件。它的工作原理与组合的雷同:

<template>
    <UseImage src="https://source.unsplash.com/random/401x301">
    <template #loading>
            <div class="loading gradient"></div>
        </template>
    <template #error>
            Oops!
        </template>
  </UseImage>
</template>

事例：https://stackblitz.com/edit/v…

最近，每个网站和应用程序仿佛都有暗黑模式。最难的局部是造型的扭转。然而一旦你有了这些，来回切换就很简略了。

如果你应用的是 Tailwind，你只须要在 html 元素中增加 dark 类，就能够在整个页面中启用。

<html class="dark"><!-- ... --></html>

然而，在光明模式和光明模式之间切换时，有几件事须要思考。首先，咱们要思考到用户的零碎设置。第二，咱们要记住他们是否曾经颠覆了这个抉择。

VueUse 的 useDark 组合性为咱们把所有这些货色都包起来。默认状况下，它查看零碎设置，但任何变动都会被长久化到localStorage，所以设置会被记住。

<script setup>
import {useDark, useToggle} from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
  <div class="container">
    Changes with dark/light mode.

    <button @click="toggleDark()">
            Enable {{isDark ? 'Light' : 'Dark'}} Mode
        </button>
  </div>
</template>

光明模式的款式:

.dark .container {
  background: slategrey;
  color: white;
  border-color: black;
}

.dark button {
  background: lightgrey;
  color: black;
}

.dark body {background: darkgrey;}

如果你没有应用 Tailwind，你能够通过传入一个选项对象来齐全定制光明模式的利用形式。上面是默认的 Tailwind:

const isDark = useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: '',
})

也能够提供一个 onChanged 处理程序，这样你就能够编写任何你须要的 Javascript。这两种办法使你能够使它与你已有的任何造型零碎一起工作。

Vueuse 领有一个微小的库，其中蕴含杰出的组合，而咱们在这里只涵盖了其中的一小部分。我强烈建议你花些工夫去摸索这些文档，看看所有可用的货色。这是一个十分好的资源，它将使你免于大量的模板代码和一直地从新创造车轮。

编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

作者：Noveo 译者：小智起源：vuemastery

原文：https://www.vuemastery.com/bl…

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

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

关于javascript:我常用的几个-VueUse-最佳组合推荐给你们

1. onClickOutside

2.useFocusTrap

3. useHead

4. useStorage

5. useVModel

6. useImage

7. 暗黑模式 useDark

总结

交换