VueUse の最適な組み合わせをいくつかまとめて共有します。ぜひ集めて使用してください。-Vue.js-php.cn

VueUse は、Anthony Fu によるオープンソースプロジェクトで、Vue 開発者に Vue 2 および Vue 3 用の基本的なコンポジション API ユーティリティ関数を多数提供します。この記事では、私がよく使用する VueUse の最適な組み合わせをいくつか紹介します。皆さんのお役に立てれば幸いです。

VueUse の最適な組み合わせをいくつかまとめて共有します。ぜひ集めて使用してください。

(学習ビデオ共有: vue ビデオチュートリアル)

Vueuse には、優れた組み合わせが多数あります。ただし、量が多すぎるため、すべてを読もうとすると要点を逸してしまう可能性があります。いくつかの便利な組み合わせは次のとおりです。

onClickOutside
useFocusTrap
useHead
#useStorage
useVModel
# useDark
1.onClickOutside

クリックの検出は非常に簡単です。しかし、要素の外側でクリックが発生したことをどのように検出するのでしょうか?それは少し難しいです。ただし、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

を作成します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const container = ref(null);</pre><div class="contentsignin">ログイン後にコピー</div></div> 次に、 ## を使用します。要素 Attribute の #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/vue3-script-setup-with-vite-18scsl?file=src/App.vue

2. useFocusTrap

アプリケーションにアクセスできるようにするには、フォーカスを正しく管理することが重要です。

モーダルの後に誤ってタブを追加し、モーダルにフォーカスを戻せなくなることほど最悪なことはありません。これがフォーカストラップの動作です。

特定の 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 要素にフォーカスが置かれます。そうすると、その容器の外にはラベルを貼ることができなくなります。 3 番目のボタンに到達した後、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/vue3-script-setup-with-vite-eocc6w?file=src/App.vue

3. useHead

VueUse は、アプリケーションのヘッド部分 (ページタイトル、スクリプト、およびここに配置されるその他のコンテンツ) を更新する簡単な方法を提供します。

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('');

ログイン後にコピー

2 番目に、

useHead を設定しますto スタイルがページに挿入されます。

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

ログイン後にコピー

次に、これらのスタイルを挿入するメソッドを追加します。

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

ログイン後にコピー

もちろん、スタイルの挿入に限定されるわけではありません。これらのいずれかを :

title

meta タグ
# に追加できます。
ベースタグ
スタイルタグ
スクリプトタグ
html属性
body属性
アドレスの例: https:/ /stackblitz.com/edit/vue3-script-setup-with-vite-szhedp?file=src/App.vue
4、useStorage

ref
をローカルストレージに自動的に同期してくれるので、非常に優れています。例:
<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
}
ログイン後にコピー
5、useVModel

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/vue3-script-setup-with-vite-ut5ap8?file=src%2FApp.vue

6、useImage

随着时间的推移，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/vue3-script-setup-with-vite-d1jsec?file=src%2FApp.vue

7、暗黑模式 useDark

最近，每个网站和应用程序似乎都有暗黑模式。最难的部分是造型的改变。但是一旦你有了这些，来回切换就很简单了。

如果你使用的是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 には、優れた組み合わせを備えた巨大なライブラリがありますが、ここではそのほんの一部のみを説明しました。時間をかけてドキュメントを調べ、利用可能なものをすべて確認することを強くお勧めします。これは、多くの定型コードや常に車輪の再発明をする手間を省いてくれる素晴らしいリソースです。

[関連ビデオチュートリアルの推奨事項: vuejs エントリチュートリアル、Web フロントエンドエントリ]