Vue3 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-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 };

接来下开始进行逻辑的抽离：

1.新建一个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}
};

2.在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 文件看上去是不是非常清爽。功能跟未抽离前是一样的：

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

Vue3 Hooks 模块化抽离相关推荐

vue3 hooks碰到的问题
根据项目的需求,需要将获取报表id的方法写成一个hooks,在hooks是否使用监听watch,碰到了一系列的问题.在写hooks的时候,在hooks里面写了监听watch,写了一个响应式的数据,但是 ...
Vue3 props组件抽离
引言假设你已经了解了Vue3的setup函数,不了解的话可以先看看这篇文章. 拥抱Vue3 (二) setup函数_flow_camphor的博客-CSDN博客在setup函数中我们知道它有两个参 ...
vue mixins（vue3 hooks）动态获取div高度
之前转载过一篇文章: https://blog.csdn.net/qq_37167049/article/details/103084927 可以动态计算div 高度,但是比较繁琐的痛点是: 需要在每 ...
详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步.甚至每一个配置项的作用,和每个配置的知 ...
GoView 开源，一个好用的 Vue3 低代码开发数据大屏系统
介绍 GoView 是一个高效的拖拽式低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可制作数据大屏,减少心智负担.当然低代码也不是 "银弹",希望所有技术 ...
Vue3能用到生产环境了吗？
最近,有不少朋友问我:"十三,看你写了几个Vue3的项目,你觉得Vue3能用到生产环境了吗?"结合自己的想法和尤大直播说的话,给一点建议. 别问我!没结果,除非花手摇过我. 我不是 ...
vue3状态管理工具 pinia的使用
vue3状态管理工具 pinia的使用 pinia 是一个轻量级的状态管理库,属于 vue3 生态圈新的成员之一,也可以把它看做 vuex5,同时支持 vue2 和 vue3,模块化的设计让它的结构十 ...
iOS 模块化进阶整理记录
先说模块化可能给项目带来的改变: 代码提交更规范,分工更为明确,质量提高编译加快在原模式中,需要 150s 左右整个编译完毕,然后开发人员才可以开始调试.而现在组件化之后,某个业务组件只需要 10 ...
分享一个强大的数据可视化低代码开发平台
点击关注公众号:互联网架构师,后台回复 2T获取2TB学习资源! 上一篇:Alibaba开源内网高并发编程手册.pdf 整体介绍框架:基于 Vue3 框架编写,使用 hooks 写法抽离部分逻辑,使 ...
服务端渲染(SSR) 通用技术解决方案
项目背景服务端渲染(SSR) 通用技术解决方案的诞生来源于对 360搜索百科移动端项目的一次重构实践.而当时决定重构该项目的主要原因有以下几点: 1. 技术栈陈旧,熟悉.开发以及维护成本都较高项 ...

Vue3 Hooks 模块化抽离

最后

Vue3 Hooks 模块化抽离相关推荐

最新文章

热门文章