Vue3 Hooks 模块化抽离

Vue3 Hooks 模块化最佳实践

最新推荐文章于 2025-09-30 14:34:04 发布

最新推荐文章于 2025-09-30 14:34:04 发布 · 2.2k 阅读

文章标签：

#vue.js #前端 #javascript

本文探讨Vue3中如何进行Hooks的模块化抽离，以提高组件的复用性和代码整洁度。通过创建独立的hooks文件，将业务逻辑移出组件，实现了逻辑的集中管理。文中提供了一个具体的步骤示例，展示如何将状态和方法从组件中分离到单独的hooks文件，并在组件中导入和使用。这种做法不仅使组件更简洁，同时也方便了代码的维护和共享。

Vue3中的Hooks 其实就是业务逻辑的抽离，跟Vue2中mixin 本质上是一样的：将当前组件的业务逻辑抽离到一个公共的文件中，提高逻辑复用性，让当前组件看起来更加清爽，不太一样的地方是我们封装hooks 的时候一般是返回一个函数。

先来看一个简单的例子：todoList demo。

新建一个Vue3+Ts的项目： npm init vite@latest 项目名称:vue3-hooks，使用TS，然后cd vue3-hooks -> npm install -> npm run dev 然后删除不必要的内容，新建一个type 文件夹存放所有的类型，新建一个TodoList.vue编写我们的业务和视图代码：现在的目录结构如下：

TodoList.vue代码如下：

 <template><h1>To do List</h1>添加一条记录: <input type="text" v-model="data.toAddData.title" /><button @click="onAdd">添加</button><br /><br /><table><thead><tr><td>id</td><td>名称</td><td>是否完成</td></tr></thead><tbody><tr v-fo