Vue3 Hooks 模块化抽离示例详解_vue.js_

正文

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

todoList demo

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

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

目录结构

TodoList.vue代码如下

定义的类型文件

interface IntTodoList { id: number; title: string; isFinished: boolean; } export type { IntTodoList }; 

逻辑抽离

• 新建一个hooks 文件夹，在hooks 文件夹中新建一个todoList.ts 文件，将TodoList.vue 中的data 数据 和onAdd 方法 抽离到hooks文件中，并导出：

import { reactive } from "vue"; import { IntTodoList } from "../../type/todoList"; export default () => { type DataType = { list: IntTodoList[]; toAddData: IntTodoList; }; const data = reactive({ list: [], toAddData: { id: 0, title: "", isFinished: false, }, }); const onAdd = () => { data.list.push({ ...data.toAddData, id: data.list.length + 1 }); }; return { data, onAdd} }; 

在TodoList.vue 中导入：

如果其他组件需要data 数据 和 onAdd 方法，也可以导入hooks 文件使用，而且现在再来看TodoList.vue 文件看上去是不是非常清爽。 功能跟未抽离前是一样的：

完整代码

以上就是Vue3 Hooks 模块化抽离示例详解的详细内容，更多关于Vue3 Hooks 模块化抽离的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！