Vue3 Hooks 模块化抽离示例详解
作者:wangfeng6075
这篇文章主要为大家介绍了Vue3 Hooks 模块化抽离示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
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代码如下
<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-for="item in data.list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.title }}</td> <td>{{ item.isFinished }}</td> </tr> </tbody> </table> </template> <script setup lang="ts"> import { reactive } from "vue"; import { IntTodoList } from "../type/todoList"; type DataType = { list: IntTodoList[]; toAddData: IntTodoList; }; const data = reactive<DataType>({ list: [], toAddData: { id: 0, title: "", isFinished: false, }, }); const onAdd = () => { data.list.push({ ...data.toAddData, id: data.list.length + 1 }); }; </script>
定义的类型文件
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<DataType>({ list: [], toAddData: { id: 0, title: "", isFinished: false, }, }); const onAdd = () => { data.list.push({ ...data.toAddData, id: data.list.length + 1 }); }; return { data, onAdd} };
在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-for="item in data.list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.title }}</td> <td>{{ item.isFinished }}</td> </tr> </tbody> </table> </template> <script setup lang="ts"> import TodoListHooks from './hooks/todoList' const {data, onAdd} = TodoListHooks() </script>
如果其他组件需要data
数据 和 onAdd
方法,也可以导入hooks
文件使用,而且现在再来看TodoList.vue
文件看上去是不是非常清爽。 功能跟未抽离前是一样的:
以上就是Vue3 Hooks 模块化抽离示例详解的详细内容,更多关于Vue3 Hooks 模块化抽离的资料请关注脚本之家其它相关文章!