Vue3 Hooks 模块化抽离示例详解

更新时间：2022年09月19日 16:37:42 作者：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 模块化抽离的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue实现一个动态添加行的表格步骤详解
在Vue组件中定义表格的数据模型,通常使用一个数组来存储表格的数据,每一行数据可以是一个对象,对象的属性对应表格的列,这篇文章主要介绍了Vue实现一个动态添加行的表格步骤详解,需要的朋友可以参考下
2024-05-05
VUE中的mapState和mapActions的使用详解
在VUE项目中经常会用到mapState和mapActions，mapState主要用于同步全局的变量或者对象，这篇文章主要介绍了VUE中的mapState和mapActions的使用,需要的朋友可以参考下
2022-06-06
Vue全家桶入门基础教程
Vue 是一套用于构建用户界面的渐进式框架，和React，都自称自己只关注视图层，全家桶对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架，本文给大家分享Vue全家桶入门基础教程，感兴趣的朋友一起看看吧
2021-05-05
在vue中使用echarts实现飞机航线水滴图词云图效果
这篇文章主要介绍了在vue中使用echarts实现飞机航线水滴图词云图,通过引入中国地图JS文件，会自动注册地图，文中结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
详解vue中v-on事件监听指令的基本用法
这篇文章主要介绍了详解vue中v-on事件监听指令的基本用法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
vue预览 pdf、word、xls、ppt、txt文件的实现方法
这篇文章主要介绍了vue预览 pdf、word、xls、ppt、txt文件的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue2.0实现检测无用的代码并删除
这篇文章主要介绍了vue2.0实现检测无用的代码并删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue elementUI table表格数据滚动懒加载的实现方法
这篇文章主要介绍了vue elementUI table表格数据滚动懒加载的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
vue Tab切换以及缓存页面处理的几种方式
相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。
2021-05-05
vue 使用外部JS与调用原生API操作示例
这篇文章主要介绍了vue 使用外部JS与调用原生API操作,结合实例形式分析了vue.js调用外部JS与原生API相关操作技巧及注意事项,需要的朋友可以参考下
2019-12-12