最佳实践

解构

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()解开 ref。例如

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 函数也接受 ref 作为参数，因为 ref 是响应式的。

以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!')