在软件开发过程中，构建一个可以有效复用代码的库至关重要。重复复制代码会导致代码库臃肿，增加调试难度，尤其是在大型应用中。
Vue 通过可组合函数简化了代码的复用。可组合函数是封装特定逻辑的函数，可以在项目中重复使用以处理类似的功能。
曾经只有可组合函数吗？
在 Vue 3 引入可组合函数之前，可以通过混入 (mixins) 来捕获代码并在应用程序的不同部分复用。混入包含了 Vue.js 的选项，如数据、方法和生命周期钩子，从而实现跨多个组件的代码复用。
要创建混入，可以将其构建在单独的文件中，然后通过将混入添加到组件的选项对象中的 mixins 属性来应用于组件。例如：
export const formValidationMixin = {
data() {
return {
formData: {
username: '',
password: '',
},
formErrors: {
username: '',
password: '',
},
};
},
methods: {
validateForm() {
this.formErrors = {};
if (!this.formData.username.trim()) {
this.formErrors.username="用户名是必填的。";
}
if (!this.formData.password.trim()) {
this.formErrors.password = '密码是必填的。';
}
return Object.keys(this.formErrors).length === 0;
},
},
};
这段代码展示了一个用于表单验证的混入。该混入包含两个数据属性：formData 和 formErrors，初始值都为空。
formData 存储表单的输入数据，包括初始化为空的用户名和密码字段。formErrors 镜像此结构，用于保存潜在的错误消息，初始值也为空。
混入还包含一个方法 validateForm()，用于检查用户名和密码字段是否为空。如果任何一个字段为空，将使用相应的错误消息填充 formErrors 数据属性。
当 formErrors 为空时，该方法返回 true，表示表单有效。可以通过将混入导入到 Vue 组件并将其添加到选项对象的 mixins 属性来使用混入：
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="formData.username" />
<span class="error">{{ formErrors.username }}</span>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="formData.password" />
<span class="error">{{ formErrors.password }}</span>
</div>
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
import { formValidation } from "./formValidation.js";
export default {
mixins: [formValidation],
methods: {
submitForm() {
if (this.validateForm()) {
alert("表单提交成功!");
} else {
alert("请修正表单中的错误。");
}
},
},
};
</script>
<style>
.error {
color: red;
}
</style>
这个示例展示了一个使用选项对象方法编写的 Vue 组件。mixins 属性包含所有导入的混入。在这种情况下，组件使用 formValidation 混入中的 validateForm 方法来通知用户表单是否提交成功。
如何使用可组合函数
可组合函数是一个独立的 JavaScript 文件，它具有根据特定问题或需求定制的功能。可以在可组合函数中利用 Vue 的组合 API，使用诸如 ref 和 computed 等功能。
通过对组合 API 的访问，可以创建集成到各种组件中的函数。这些函数返回一个对象，可以通过组合 API 的 setup 函数轻松导入并合并到 Vue 组件中。
在项目的 src 目录中创建一个新的 JavaScript 文件来使用可组合函数。对于较大的项目，请考虑在 src 中组织一个文件夹，并为不同的可组合函数创建单独的 JavaScript 文件，确保每个可组合函数的名称反映其用途。
在 JavaScript 文件中，定义需要的函数。下面是将 formValidation 混入重构为可组合函数的示例：
import { reactive } from 'vue';
export function useFormValidation() {
const state = reactive({
formData: {
username: '',
password: '',
},
formErrors: {
username: '',
password: '',
},
});
function validateForm() {
state.formErrors = {};
if (!state.formData.username.trim()) {
state.formErrors.username="用户名是必填的。";
}
if (!state.formData.password.trim()) {
state.formErrors.password = '密码是必填的。';
}
return Object.keys(state.formErrors).length === 0;
}
return {
state,
validateForm,
};
}
这段代码首先从 vue 包中导入 reactive 函数。然后它创建一个可导出的函数 useFormValidation()。
接下来创建一个响应式变量 state，其中包含 formData 和 formErrors 属性。然后，这段代码使用与混入非常相似的方法来处理表单验证。最后，它以对象的形式返回 state 变量和 validateForm 函数。
可以通过从组件中的文件导入 JavaScript 函数来使用此可组合函数：
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="state.formData.username" />
<span class="error">{{ state.formErrors.username }}</span>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="state.formData.password" />
<span class="error">{{ state.formErrors.password }}</span>
</div>
<button type="submit">提交</button>
</form>
</div>
</template>
<script setup>
import { useFormValidation } from "./formValidation.js";
import { ref } from "vue";
const { state, validateForm } = useFormValidation();
const submitForm = () => {
if (validateForm()) {
alert("表单提交成功!");
} else {
alert("请修正表单中的错误。");
}
};
</script>
<style>
.error {
color: red;
}
</style>
导入 useFormValidation 可组合函数后，这段代码会解构它返回的 JavaScript 对象并继续进行表单验证。它会提醒提交的表单是否成功或有错误。
可组合函数是新的混入
虽然混入在 Vue 2 中对于代码复用很有用，但在 Vue 3 中可组合函数已经取代了它们。可组合函数提供了一种更加结构化和可维护的方法来复用 Vue.js 应用程序中的逻辑，从而更容易使用 Vue 构建可扩展的 Web 应用程序。