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="onAd