最佳实践

解构

VueUse 中的大多数函数返回一个ref 对象，你可以使用 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 组合式函数帮助你获取和设置当前页面的 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!')