当前位置：首页 > article >正文

Vue.js 组合函数（Composables）

article 2025/1/31 8:26:23

Vue.js 组合函数（Composables）

今天我们来聊聊 Vue 3 中的一个重要概念：组合式函数（Composables）。如果你对如何在 Vue 3 中复用有状态逻辑感兴趣，那么这篇文章将为你解答。

什么是组合式函数？

在 Vue 应用中，组合式函数是利用 Vue 的组合式 API（Composition API）来封装和复用有状态逻辑的函数。这使得我们可以将组件的逻辑提取到独立的函数中，从而在不同的组件之间共享和复用。

为什么需要组合式函数？

在构建前端应用时，我们经常需要在多个组件中复用相同的逻辑。传统的混入（mixins）方式虽然可以实现逻辑复用，但存在命名冲突和来源不明等问题。组合式函数通过函数封装的方式，提供了更清晰和灵活的逻辑复用方案。

如何创建组合式函数？

让我们通过一个示例来了解如何创建和使用组合式函数。

示例：跟踪鼠标位置

假设我们需要在多个组件中跟踪鼠标的位置。我们可以创建一个组合式函数来封装这一逻辑：

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  // 定义响应式数据
  const x = ref(0);
  const y = ref(0);

  // 更新鼠标位置的函数
  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  // 在组件挂载时添加事件监听器
  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  // 在组件卸载时移除事件监听器
  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  // 返回响应式数据
  return { x, y };
}

在组件中使用该组合式函数：

<template>
  <div>
    鼠标位置：{{ x }}, {{ y }}
  </div>
</template>

<script setup>
import { useMouse } from './useMouse.js';

const { x, y } = useMouse();
</script>

通过这种方式，我们将跟踪鼠标位置的逻辑提取到了 useMouse 组合式函数中，可以在多个组件中复用。

最佳实践

命名约定：按照惯例，组合式函数通常以“use”开头，并采用小驼峰命名法，例如 useFetch、useMouse。
参数处理：组合式函数可以接受 ref 或 getter 作为参数。为了确保函数的通用性，建议在函数内部处理参数可能是 ref 或 getter 的情况。Vue 提供了 toValue 工具函数来简化这一过程。
返回值：建议组合式函数返回一个包含多个 ref 的普通非响应式对象。这样，在组件中解构时可以保持响应性。

注意事项