vue3组合式函数(Composables) 使用示例【useValid】

毛三仙

已于 2025-07-17 16:34:00 修改

阅读量597

点赞数 13

CC 4.0 BY-SA版权

分类专栏： mixin 文章标签： vue.js 前端 javascript

于 2025-07-17 16:33:18 首次发布

本文链接：https://blog.csdn.net/m0_74149462/article/details/149423299

mixin 专栏收录该内容

2 篇文章

订阅专栏

vue实现自定义校验值是否有效_vue数据有效性验证-CSDN博客文章浏览阅读215次。【代码】vue实现自定义校验值是否有效。_vue数据有效性验证https://blog.csdn.net/m0_74149462/article/details/145511296

组合式函数 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/reusability/composables.html#comparisons-with-other-techniques

Composables功能就类似vue2的mixins,但还是有些差别

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 lodash 或是 date-fns。

相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。

鼠标跟踪器示例

如果我们要直接在组件中使用组合式 API 实现鼠标跟踪功能，它会是这样的：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

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))
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

但是，如果我们想在多个组件中复用这个相同的逻辑呢？我们可以把这个逻辑以一个组合式函数的形式提取到外部文件中：

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

// 按照惯例，组合式函数名以“use”开头
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 }
}

下面是它在组件中使用的方式：

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

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

<template>Mouse position is at: {{ x }}, {{ y }}</template>

与其他模式的比较

和 Mixin 的对比

Vue 2 的用户可能会对 mixins 选项比较熟悉。它也让我们能够把组件逻辑提取到可复用的单元里。然而 mixins 有三个主要的短板：

不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。
命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。
隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。

基于上述理由，我们不再推荐在 Vue 3 中继续使用 mixin。保留该功能只是为了项目迁移的需求和照顾熟悉它的用户。

和无渲染组件的对比

在组件插槽一章中，我们讨论过了基于作用域插槽的无渲染组件。我们甚至用它实现了一样的鼠标追踪器示例。

组合式函数相对于无渲染组件的主要优势是：组合式函数不会产生额外的组件实例开销。当在整个应用中使用时，由无渲染组件产生的额外组件实例会带来无法忽视的性能开销。

我们推荐在纯逻辑复用时使用组合式函数，在需要同时复用逻辑和视图布局时使用无渲染组件。

和 React Hooks 的对比

如果你有 React 的开发经验，你可能注意到组合式函数和自定义 React hooks 非常相似。组合式 API 的一部分灵感正来自于 React hooks，Vue 的组合式函数也的确在逻辑组合能力上与 React hooks 相近。然而，Vue 的组合式函数是基于 Vue 细粒度的响应性系统，这和 React hooks 的执行模型有本质上的不同。这一话题在组合式 API 的常见问题中有更细致的讨论。

vaild Mixin 修改示例

src/composable/useValid.js

// src/composables/useValid.js
import { ref } from 'vue'

export default function useValid() {
  const invalidValues = ref(["undefined", "null", "NaN", "", null, undefined, NaN])

  const isValidValue = (v) => {
    return !invalidValues.value.includes(v)
  }

  const returnValue = (v) => {
    return isValidValue(v) ? v : "-"
  }

  const returnToFixedValue = (v, part = 2) => {
    return isValidValue(Number(v)) ? Number(v).toFixed(part) : "-"
  }

  const makeDifference = (max, min, part = 2) => {
    return isValidValue(max) && isValidValue(min)
      ? (max - min).toFixed(part)
      : "-"
  }

  return {
    isValidValue,
    returnValue,
    returnToFixedValue,
    makeDifference
  }
}

局部注册使用

import useValid from "@/composable/useValid.js";
const { returnValue } = useValid();



<el-form
    ref="formRef"
    :rules="formRules"
    label-width="5.5rem"
    :model="formData"
>
    <el-form-item label="告警车辆 :" prop="routeName">
        {{ returnValue(formData.routeName) }}
    <el-form-item>
</el-form>

全局注册

方法一： provide/inject

main.js 注册

import useValid from "@/composable/useValid.js";
app.provide('$valid', useValid())

使用

const {
  returnValue
} = inject("$valid")

        <el-form
          ref="formRef"
          :rules="formRules"
          label-width="5.5rem"
          :model="formData"
        >
          
              <el-form-item label="告警车辆 :" prop="routeName">
                {{ returnValue(formData.routeName) }}
              </el-form-item>
        </el-form>

方法二： app.config.globalProperties

man.js 注册

import useValid from "@/composable/useValid.js";
app.config.globalProperties.$valid = useValid() // 挂载到全局

使用

const { proxy } = getCurrentInstance();
const { returnValue } = proxy.$valid;


{{ returnValue(formData.routeName) }}