在上一篇 Vite + Vue3 初体验 —— Vite 篇 博客中，我感受到了 Vite 带来的运行时效率提升，这一期再来感受感受 Vue3 带来的新变化 —— 关注点分离。
Todo List 设计
这次体验 Vue3，我想做一个能体验（部分） Vue3 新特性的功能模块。
想了想，用一个 Todo List 应该是比较合适的。
我们来规划一下它的功能清单吧。
- 输入
Todo，按下回车即可添加一条新的Todo Item。 - 以列表的形式显示所有的
Todo Item。 - 可以将
Todo Item标记为完成，标记完成后的Todo Item会置灰，并且排序处于最下面。 - 可以将
Todo Item删除，删除后在列表中不展示。 - 可以将
Todo Item置顶，高亮显示，以提高优先级。
OK，接下来，我们先把基础页面搭建出来吧。
搭建基础 UI 界面
配置 UI 库
目前支持 Vue3 的 UI 框架有下面几种：
- Ant Design Vue
- Element Plus
- Ionic
- Native UI
其中 ant-design 和 elementui 是从 Vue2 一路走来的老 UI 库了，我在体验 Vue3 的时候决定还是使用轻风格的 ant-design。
先安装支持 Vue3 的 ant-design-vue 吧。
yarn add ant-design-vue@next
然后，再配置一下按需加载，这样的话，只有被使用到的组件才会被打包，可有效减小生产包的体积。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
AntDesignVueResolver(),
],
}),
]
});
最后，在 main.ts 中引入样式文件。
// main.ts
import 'ant-design-vue/dist/antd.css';
基础布局
现在，我们的布局需要一个输入框和一个列表，我们先在页面把这两个元素画出来吧。
在此之前，在
App.vue中引入了我们的TodoList组件。
// TodoList.vue
Todo Item
Todo Item
Todo Item
这次我选了一套黄橙配色，我们来看看界面的效果吧。
处理业务逻辑
处理输入
现在，我们来处理一下我们的输入逻辑，在按下回车键时，将输入的结果收集起来添加到 Todo 数组中，并且将输入框清空。
这里需要用到双向绑定，定义一个 引用 变量，与输入框进行绑定。
//...
现在打开本地开发界面，输入一个值，然后按下回车，输入框的值就被清空了 —— 将这一项添加到了 todoList 数组中！
渲染列表
在处理好了输入之后，现在需要将列表渲染出来。
这里还是用经典的 v-for 语法，同时需要加上一些状态的判断。
{{item.title}}
这个语法相信用过 vue2 的都清楚，就不做过多介绍了。
有一说一，
vscode+volar对vue3 + ts的支持是真不错，代码提示和错误提示都非常完善了。在开发过程中，简直是事半功倍。
处理删除和完成逻辑
最后，我们来处理一下删除和完成的逻辑吧。
//...
最后，来看看我们界面的效果吧。（如下图）
加入置顶逻辑
我们需要先给数组元素添加一个字段 is_top，用于判断该节点是否置顶。
然后，再加入置顶函数的逻辑处理以及样式显示。（如下）
//...
{{item.title}}
然后，我们来看看我们的界面效果吧！（如下图）
这样一来，我们的 Todo List 就完成了！
现在再来看看我们的代码，主要是有两块逻辑关注点：
-
todoList相关逻辑，负责列表的渲染以及列表的相关操作（删除、置顶、完成）。 -
todoText相关逻辑，负责处理输入框的输入。
在分离了逻辑关注点后带来的好处时，如果我想要修改列表相关的处理逻辑，我只需要关注和调整 todoList 相关的代码即可；如果我想要调整输入相关的逻辑，我只需要关注和调整 todoText 相关的逻辑即可。
如果这两块的逻辑后面随着业务发展而变得越来越复杂了，我可以选择将其拆分成更小块的业务逻辑来进行维护，还可以将这些逻辑都拆分到单文件中进行维护管理，这样对于后续的维护和升级都能够有更好的把控。
处理前后端交互逻辑
我们之前所有的逻辑都是在本地做的处理，现在我们来接入服务端的逻辑，将我们的所有数据及变更进行持久化。同时，我们也来看看在 Vue3 中，如何处理有前后端交互逻辑的场景。
假设我们有下面这么几组接口（如下图）
那么，基于这几组接口的后端交互逻辑，我们还是用经典的 axios 来做吧。
使用
yarn add axios添加依赖。
这里，我们先在 src 目录下新建一个 service，用于初始化我们用于网络请求的 service。（如下）
// src/service/index.ts
import axios from "axios";
const service = axios.create({
// 设置 baseURL，这个地址是我部署的后端服务
baseURL: "https://hacker.jt-gmall.com"
});
export default service;
用户身份信息
我们设计的 Todo List 是一个在线网页，我们希望每个用户进来看到的都是自己的 Todo List。
我们来看看后台的接口设计，他使用 key 来给 Todo Item 做分组，所以我们需要在进入页面时，为每一个用户生成一个独一无二的 user key。
我们先设计一个用来获取 key 的函数吧。
这里使用
uuid来生成唯一的user key。
// service/auth.ts
import { v4 as uuid } from "uuid";
const getUserKey = () => {
if (localStorage.getItem('user_key')) return localStorage.getItem('user_key');
const userKey = uuid();
localStorage.setItem('user_key', userKey);
return userKey;
}
export {
getUserKey
}
获取 Todo List
然后，我们回到我们的 TodoList.vue 文件，我们先写一个获取远端 Todo 列表的逻辑。（如下）
// TodoList.vue
import service from "@/service";
import { getUserKey } from '@/service/auth';
// 创建一个引用变量，用于绑定 Todo List 数据
const todoList = ref<{
title: string,
is_completed: boolean,
is_top: boolean
}[]>([]);
// 初始化 todo list
const getTodoList = async () => {
const reply = await service.get('/todo/get-todo-list', { params: { key: getUserKey() } });
todoList.value = reply.data.data;
}
getTodoList();
这里加上网络请求后，页面也是不会有什么变化的，因为这个用户目前是没有数据的。
接下来，我们把剩下的几个逻辑都补全。
注意：这里使用到了
alias别名功能，需要在vite.config.ts和tsconfig.json中进行配置。
import path from 'path';
// vite.config.ts
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
}
},
// ...
})
// tsconfig.json
{
"compilerOptions": {
// ...
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"]
}
}
}
新增、置顶、完成、删除 Todo
由于用户进入 Todo List 查看的都是自己的数据，并且该数据只有自己可操作。
所以，也是为了能有更好的用户体验，在我们所有的操作逻辑完成后，回显数据还是用原有的逻辑。
当然，新增数据时，还是需要重新获取列表数据，因为我们操作数据时需要用到每一项的 id。
综上所述，我们重构后的四个函数长这样。
// 删除、完成、置顶的逻辑都与 todoList 放在同一个地方，这样对于逻辑关注点就更加聚焦了
const onDeleteItem = async (index: number) => {
const id = todoList.value[index].id;
await service.post('/todo/delete', { id });
todoList.value.splice(index, 1);
}
const onCompleteItem = async (index: number) => {
const id = todoList.value[index].id;
await service.post('/todo/complete', { id });
todoList.value[index].is_completed = true;
// 重新排序，将已经完成的项目往后排列
const todoItem = todoList.value.splice(index, 1);
todoList.value.push(todoItem[0]);
}
const onTopItem = async (index: number) => {
const id = todoList.value[index].id;
await service.post('/todo/top', { id });
todoList.value[index].is_top = true;
// 重新排序，将已经完成的项目往前排列
const todoItem = todoList.value.splice(index, 1);
todoList.value.unshift(todoItem[0]);
}
// 新增 Todo Item 的逻辑都放在一处
// 创建一个引用变量，用于绑定输入框
const todoText = ref('');
const addTodoItem = () => {
// 新增一个 TodoItem，请求新增接口
const todoItem = {
key: getUserKey(),
title: todoText.value
}
return service.post('/todo/add', todoItem);
}
const onTodoInputEnter = async () => {
if (todoText.value === '') return;
await addTodoItem();
await getTodoList();
// 添加成功后，清空 todoText 的值
todoText.value = '';
}
逻辑修改完成后，我们回到页面查看一下效果吧！我们做一些操作后，刷新页面查看一下。（如下图）
刷新页面后，我们的数据依然是可以展示出来的，说明数据已经成功做了服务端持久化啦！
小结
这次，我们用 Vue3 来完成了一个简单的 Todo List 系统。
可以看出，Vue3 对 ts 的支持变得更友好了，而新的 vue 单文件语法和 组合式 API 给我的体验也有点接近 React + JSX。 —— 我的意思是，给开发者的体验更好了。
我们再来看看我们用 组合式 API 实现的逻辑部分（如下图）。
从上图可以看出，我们的逻辑关注点被分成了两大块，分别是列表相关逻辑（渲染、操作）和新增 Todo Item。
这种清晰的职责划分使得我们需要维护某一部分的功能时，与之相关的内容都被圈在了一个比较小的范围，能够让人更加聚焦到需要调整的功能上。
如果现在让我给 Vue3 和 Vue2 的（开发）体验打个分的话，我会分别给出 8分 和 6分。
好啦，我们这次的 Vue3 体验就到此为止了，Vue3 给我的体验还是非常不错的！
最后附上本次体验的 Demo 地址。
最后一件事
如果您已经看到这里了，希望您还是点个赞再走吧~
您的点赞是对作者的最大鼓励，也可以让更多人看到本篇文章！
如果觉得本文对您有帮助，请帮忙在 github 上点亮 star 鼓励一下吧！