最佳實踐

解構

VueUse 中的大多數函式都會傳回一個 ** refs 的物件 **，您可以使用 ES6 的物件解構語法來取得您需要的項目。 例如

import { useMouse } from '@vueuse/core'

// "x" and "y" are refs
const { x, y } = useMouse()

console.log(x.value)

const mouse = useMouse()

console.log(mouse.x.value)

如果您希望將它們用作物件屬性，可以使用 reactive() 解開 refs。 例如

import { useMouse } from '@vueuse/core'
import { reactive } from 'vue'

const mouse = reactive(useMouse())

// "x" and "y" will be auto unwrapped, no `.value` needed
console.log(mouse.x)

副作用清理

與 Vue 的 watch 和 computed 在元件卸載時會被處置類似，VueUse 的函式也會自動清理副作用。

例如，useEventListener 將在元件卸載時呼叫 removeEventListener。

// will cleanup automatically
useEventListener('mousemove', () => {})

所有 VueUse 函式都遵循此慣例。

要手動處置副作用，某些函式會像 watch 函式一樣傳回停止處理常式。 例如

const stop = useEventListener('mousemove', () => {})

// ...

// unregister the event listener manually
stop()

並非所有函式都會傳回 stop 處理常式，因此更通用的解決方案是使用 Vue 的 effectScope API。

import { effectScope } from 'vue'

const scope = effectScope()

scope.run(() => {
  // ...

  useEventListener('mousemove', () => {})
  onClickOutside(el, () => {})
  watch(source, () => {})
})

// all composables called inside `scope.run` will be disposed
scope.stop()

您可以在 此 RFC 中了解有關 effectScope 的更多資訊。

響應式引數

在 Vue 中，我們使用 setup() 函式來建構資料與邏輯之間的「連接」。 為了使其更具彈性，大多數 VueUse 函式也接受 refs 作為引數，因為 refs 是響應式的。

以 useTitle 為例

非響應式引數

useTitle composable 可協助您取得和設定目前頁面的 document.title 屬性。

const isDark = useDark()
const title = useTitle('Hello')

console.log(document.title) // "Hello"

watch(isDark, () => {
  title.value = isDark.value ? '🌙 Good evening!' : '☀️ Good morning!'
})

Ref 引數

您可以將 ref 傳遞到 useTitle 中，而不是使用傳回的 ref。

const isDark = useDark()
const title = computed(() => isDark.value ? '🌙 Good evening!' : '☀️ Good morning!')

useTitle(title)

響應式 Getter 引數

自 VueUse 9.0 以來，我們引入了一種新的慣例，將「響應式 Getter」作為引數傳遞，這對於響應式物件和 響應性轉換 非常有用。

const isDark = useDark()

useTitle(() => isDark.value ? '🌙 Good evening!' : '☀️ Good morning!')