最佳实践

解构

VueUse 中的大多数函数返回一个 ref 对象，你可以使用 ES6 的对象解构语法来提取所需的内容。例如：

import { useMouse
 } from '@vueuse/core'

// "x" 和 "y" 是一个 ref
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" 和 "y" 将自动取消引用，无需 `.value`
console
.log
(mouse
.x
)

副作用清理

类似于 Vue 的 watch 和 computed 在组件卸载时会被清理，VueUse 的函数也会自动清理副作用。

例如，useEventListener 在组件卸载时会调用 removeEventListener。

// 将自动清理
useEventListener
('mousemove', () => {})

所有 VueUse 函数都遵循这一约定。

有些函数会返回一个类似于 watch 函数的停止处理器，用于手动清理副作用。例如：

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

// ...

// 手动注销事件监听器
stop
()

并非所有函数都会返回一个 stop 处理器，因此更通用的解决方案是使用 Vue 的 effectScope API。

import { effectScope } from 'vue'

const scope = effectScope()

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

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

// 所有在 `scope.run` 内调用的组合函数都将被清理
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!')

最佳实践 ​

解构 ​

副作用清理 ​

响应式参数 ​

非响应式参数 ​

Ref 参数 ​

响应式 Getter 参数 ​