如何使用vue3.2编写自定义hooks？

本文共计408个文字，预计阅读时间需要2分钟。

在某些场景下，我们需要将一个页面成各个模块。这些模块包括添加、删除、修改等功能，并能处理复杂的业务逻辑问题。最佳做法是将它们分开。如何分离新模块？

场景

有些时候，我们需要将一个页面拆分成各个模块。 这些模块包含增加，删除，修改，等 并且这些模块会处理非常复杂的业务逻辑问题 所以，我们最好是将他们分开。 如何将分离新增模块拆离出去 主页面

<template> <div> <el-button @click="addHanlder">新增</el-button> <ul> <li v-for="item in listArr" :key="item.id"> {{ item.name }} </li> </ul> </div> </template> <script lang="ts" setup> import { ref} from 'vue' // 导入新增模块的业务逻辑，注意不能够写成add.ts import addHooks from './add' // 定义接口 interface listType{ name?:string, age ?:number, id:string, // 可以有任意多个字段-任意类型 [propN:string]:any, } let listArr=ref<listType[]>([ {name:'张三',age:21,id:'001'}, {name:'李四',age:20,id:'002'}, {name:'周六',age:28,id:'004',aa:'xx'}, ]) // 使用新增模块 let { addHanlder }=addHooks(listArr.value); </script> add.ts文件

// 新增功能的逻辑 // 注意这里需要说明listArr的参数类型哈 { name?: string; age?: number; id: string }[] function addHooks(listArr: { name?: string; age?: number; id: string }[]) { function addHanlder() { listArr.push( {name:'王五',age:24,id:'005'} ) } return { addHanlder } } export default addHooks

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。