Vue 3 引入了 Composition API，这种新的 API 提供了一种更灵活、更强大的方式来组织和复用逻辑。Composition API 中的钩子（hooks）使得我们能够将组件的逻辑提取到独立的可复用函数中。这不仅提高了代码的可维护性，还增强了逻辑复用性。本文将详细介绍如何使用 Vue 3 的 Hook 实现组件封装，并提供具体的示例代码。
目录
1. 介绍
2. 安装 Vue 3
3. 什么是 Hook
4. 使用 Hook 封装逻辑
- • 创建 Hook
- • 在组件中使用 Hook
5. 示例：表单组件封装
6. 总结
介绍
Composition API 是 Vue 3 中的一项重要特性，它允许我们在单独的函数中组织和复用逻辑，从而避免了 Options API 中逻辑的分散。通过使用 Composition API，我们可以创建自定义的 Hook，将逻辑封装在这些 Hook 中，并在多个组件中复用它们。
安装 Vue 3
如果你还没有安装 Vue 3，可以通过以下步骤进行安装：
使用 Vue CLI
npm install -g @vue/cli vue create my-vue3-project cd my-vue3-project npm run serve
使用 Vite
npm create vite@latest my-vue3-project --template vue cd my-vue3-project npm install npm run dev
什么是 Hook
在 Vue 3 中，Hook 是一个普通的函数，使用 Composition API 实现的逻辑复用。我们可以将组件的状态和逻辑提取到一个 Hook 中，然后在需要的组件中调用这个 Hook。
使用 Hook 封装逻辑
创建 Hook
创建一个 Hook 函数，将组件的逻辑封装在这个函数中。例如，我们创建一个 useCounter Hook 来封装计数器的逻辑。
// hooks/useCounter.js import { ref } from 'vue'; export function useCounter() { const count = ref(0); const increment = () => { count.value++; }; const decrement = () => { count.value--; }; return { count, increment, decrement }; }
在组件中使用 Hook
在组件中使用我们定义的 useCounter Hook。
<!-- components/Counter.vue --> <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> <script> import { useCounter } from '../hooks/useCounter'; export default { setup() { const { count, increment, decrement } = useCounter(); return { count, increment, decrement }; } }; </script>
示例：表单组件封装
下面我们通过一个实际的例子展示如何使用 Hook 封装表单逻辑。
创建表单 Hook
我们创建一个 useForm Hook 来封装表单的逻辑，包括表单的状态、验证和提交。
// hooks/useForm.js import { reactive, ref } from 'vue'; export function useForm(initialValues, validate) { const values = reactive({ ...initialValues }); const errors = ref({}); const handleChange = (key, value) => { values[key] = value; errors.value[key] = validate(key, value); }; const handleSubmit = (callback) => { const validationErrors = {}; for (const key in values) { validationErrors[key] = validate(key, values[key]); } errors.value = validationErrors; if (Object.values(errors.value).every((error) => !error)) { callback(values); } }; return { values, errors, handleChange, handleSubmit }; }
使用表单 Hook 封装表单组件
创建一个表单组件，并使用 useForm Hook 封装表单逻辑。
<!-- components/LoginForm.vue --> <template> <form @submit.prevent="handleSubmit(onSubmit)"> <div> <label for="username">Username</label> <input id="username" v-model="values.username" @input="handleChange('username', $event.target.value)" /> <span>{{ errors.username }}</span> </div> <div> <label for="password">Password</label> <input type="password" id="password" v-model="values.password" @input="handleChange('password', $event.target.value)" /> <span>{{ errors.password }}</span> </div> <button type="submit">Login</button> </form> </template> <script> import { useForm } from '../hooks/useForm'; export default { setup() { const initialValues = { username: '', password: '' }; const validate = (key, value) => { if (key === 'username' && !value) { return 'Username is required'; } if (key === 'password' && !value) { return 'Password is required'; } return ''; }; const { values, errors, handleChange, handleSubmit } = useForm(initialValues, validate); const onSubmit = (formValues) => { console.log('Form submitted:', formValues); }; return { values, errors, handleChange, handleSubmit, onSubmit }; } }; </script>
总结
通过使用 Vue 3 的 Hook，我们可以将组件的逻辑提取到独立的函数中，从而实现逻辑的复用和封装。本文介绍了如何创建和使用 Hook，并通过一个表单示例展示了 Hook 的实际应用。通过掌握 Hook，你可以更好地组织和管理 Vue 3 应用中的逻辑，提高代码的可读性和可维护性。
