如何将Vue3 Hooks模块化抽离改写为长尾关键词？

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

目录正文字符todoListdemo目录结构TodoList.vue代码示例定义的类型文件逻辑抽象正文字符Vue3中的Hooks实际上就是业务逻辑的抽象，跟Vue2中的mixin本质上是一样的：将当前组件的业务逻辑抽象出来，放到一个单独的文件中，然后在组件中使用这个文件。将当前组件的业务逻辑抽象出来，放到一个单独的文件中，然后在组件中使用这个文件。

目录

• 正文
• todoList demo
• 目录结构
• TodoList.vue代码如下
• 定义的类型文件
• 逻辑抽离

正文

Vue3中的Hooks 其实就是业务逻辑的抽离，跟Vue2中mixin 本质上是一样的：将当前组件的业务逻辑抽离到一个公共的文件中，提高逻辑复用性，让当前组件看起来更加清爽，不太一样的地方是我们封装hooks 的时候一般是返回一个函数。

todoList demo

先来看一个简单的例子：todoList demo。