最近闲着没事，想做个小项目练练手，就想着做一个任务管理系统。说起来简单，但真正动手才发现，里面的门道还真不少。今天就跟大家聊聊我在这个项目里遇到的那些事儿。

为什么选择Vue3？说实话就是想试试新东西

刚开始选技术栈的时候，我其实有点纠结。React用得比较熟，但Vue3出来这么久了，一直想试试。最后还是选了Vue3，主要是几个原因：

首先是Composition API，听说比以前的Options API好用很多。用了之后发现确实是这样，逻辑复用变得特别方便。以前写Vue2的时候，总觉得代码散得到处都是，现在可以把相关的逻辑放到一起，看起来舒服多了。

然后就是TypeScript的支持。说实话，刚开始我是拒绝TypeScript的，觉得写起来麻烦。但用了之后才发现，真香！特别是在大一点的项目里，类型检查能帮你避免很多低级错误。

状态管理我选了Pinia，主要是因为Vuex写起来太繁琐了。Pinia的API简洁很多，而且天然支持TypeScript，用起来很顺手。

开始动手，第一个坑就是用户登录

做任何系统，用户认证都是绕不开的。我想着这应该挺简单的，结果第一天就卡住了。

// 我最初的想法，太天真了
const login = (username, password) => {
  fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ username, password })
  }).then(res => res.json())
    .then(data => {
      localStorage.setItem('token', data.token)
      // 然后就没有然后了...
    })
}

结果发现，登录成功后页面不跳转，刷新页面又变成未登录状态。后来才意识到，需要用状态管理来维护登录状态。

// auth.store.js
export const useAuthStore = defineStore('auth', () => {
  const user = ref(null)
  const token = ref(localStorage.getItem('token'))
  
  const login = async (username, password) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    })
    
    const data = await response.json()
    if (response.ok) {
      token.value = data.token
      user.value = data.user
      localStorage.setItem('token', data.token)
      router.push('/dashboard')
    }
  }
  
  return { user, token, login }
})


这样就好多了，登录状态能正常维护，页面也能正常跳转。

任务列表的拖拽功能，差点把我整疯了

任务管理系统最核心的功能就是任务列表了。我想着既然是任务管理，那拖拽排序肯定是必须的。但这个功能真的把我折腾得够呛。

一开始我想自己实现拖拽，结果发现涉及到的东西太多了：鼠标事件、触摸事件、拖拽状态管理、DOM操作等等。写了两天，效果还很差。

后来实在受不了了，直接用了SortableJS这个库。但新的问题又来了，Vue3的响应式系统和DOM操作有冲突。

// 这样写会有问题
const tasks = ref([
  { id: 1, title: '写代码' },
  { id: 2, title: '调bug' },
  { id: 3, title: '写文档' }
])

// 拖拽后DOM顺序变了，但响应式数据没变

最后的解决方案是监听拖拽事件，手动更新数据：

import Sortable from 'sortablejs'

const initSortable = () => {
  const el = document.getElementById('task-list')
  
  Sortable.create(el, {
    onEnd: (evt) => {
      // 拖拽结束后，更新数据顺序
      const item = tasks.value.splice(evt.oldIndex, 1)[0]
      tasks.value.splice(evt.newIndex, 0, item)
      
      // 同时更新后端数据
      updateTaskOrder(tasks.value)
    }
  })
}

这样就OK了，拖拽和数据能保持同步。

既然是协作工具，实时更新肯定少不了。我选择了WebSocket来实现这个功能。

说起来简单，实际做起来问题一大堆。最开始连接总是断，后来发现是因为没有做心跳检测。浏览器会自动断开闲置的WebSocket连接。

class WebSocketService {
  constructor() {
    this.ws = null
    this.heartbeatTimer = null
  }
  
  connect() {
    this.ws = new WebSocket('ws://localhost:8080')
    
    this.ws.onopen = () => {
      console.log('WebSocket连接成功')
      this.startHeartbeat()
    }
    
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data)
      this.handleMessage(data)
    }
    
    this.ws.onclose = () => {
      console.log('WebSocket连接断开，尝试重连...')
      setTimeout(() => this.connect(), 3000)
    }
  }
  
  startHeartbeat() {
    this.heartbeatTimer = setInterval(() => {
      if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify({ type: 'ping' }))
      }
    }, 30000)
  }
}

还有一个问题是消息重复。有时候网络不好，同一条消息会收到多次。我加了个消息ID去重机制：

const processedMessages = new Set()

const handleMessage = (data) => {
  if (processedMessages.has(data.id)) {
    return // 重复消息，忽略
  }
  
  processedMessages.add(data.id)
  
  switch(data.type) {
    case 'TASK_UPDATED':
      updateTask(data.payload)
      break
    case 'TASK_DELETED':
      deleteTask(data.payload.id)
      break
  }
}

性能优化，任务太多页面就卡了

刚开始任务少的时候还好，后来测试数据加到几百条，页面就开始卡顿了。每次滚动都很不流畅。

最大的问题是任务列表，所有任务都一次性渲染出来了。我实现了一个简单的虚拟滚动：

const useVirtualList = (items, itemHeight) => {
  const containerRef = ref()
  const scrollTop = ref(0)
  const containerHeight = ref(0)
  
  const visibleItems = computed(() => {
    const start = Math.floor(scrollTop.value / itemHeight)
    const end = Math.min(start + Math.ceil(containerHeight.value / itemHeight) + 1, items.value.length)
    
    return items.value.slice(start, end).map((item, index) => ({
      ...item,
      top: (start + index) * itemHeight
    }))
  })
  
  const handleScroll = (e) => {
    scrollTop.value = e.target.scrollTop
  }
  
  return { containerRef, visibleItems, handleScroll }
}

用了虚拟滚动之后，即使有上千条任务，页面也不会卡顿了。

还有一个优化是组件懒加载。一些不常用的页面，比如设置页、统计页面等，用到的时候再加载：

const routes = [
  {
    path: '/settings',
    component: () => import('@/views/Settings.vue')
  }
]

开发完了要部署上线，我选择了Docker。主要是想着开发和生产环境保持一致。

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

结果第一次构建就失败了，内存不够。后来才知道npm install很吃内存，加了个

还有一个问题是环境变量。开发环境的API地址和生产环境不一样，需要动态配置。我用了

// .env.production
VUE_APP_API_URL=https://api.example.com

最后用GitHub Actions做了自动部署：

name: Deploy
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Build and Deploy
        run: |
          npm install
          npm run build
          # 部署到服务器

这个项目做下来，感觉收获还是挺大的：

首先是对Vue3有了更深的理解。Composition API确实比以前好用，代码组织更清晰了。TypeScript虽然刚开始有点麻烦，但真的能避免很多错误。

然后是对全栈开发有了更全面的认识。以前主要做前端，这次连后端、部署都接触了，感觉技术栈更完整了。

最重要的是学会了解决问题的思路。遇到问题不要慌，先分析原因，然后查文档、搜资料、看别人怎么解决的。实在不行就换个思路，总有办法解决。

当然也有一些遗憾，比如移动端适配做得不够好，数据可视化功能还没加上。不过这就是下个版本的事情了。

技术这东西，永远学不完。重要的是保持学习的热情，多动手实践。纸上得来终觉浅，绝知此事要躬行。这次项目让我对这句话有了更深的体会。

希望我的这些经历对大家有帮助。如果你也在做类似的项目，遇到问题了可以交流交流。毕竟，程序员最不怕的就是分享踩坑经验了。

我用Vue3做了个任务管理系统，踩了不少坑

最近闲着没事，想做个小项目练练手，就想着做一个任务管理系统。说起来简单，但真正动手才发现，里面的门道还真不少。今天就跟大家聊聊我在这个项目里遇到的那些事儿。为什么选择Vue3？说实话就是想试试新东西刚开始选技术栈的时候，我其实有点纠结。React用得比较熟，但Vue3出来这么久了，一直想试试。最后还是选了Vue3，主要是几个原因：首先是Composition API，听说比以前的Options A

产品KOL

开发工具

使用Vue3+TypeScript+Pinia开发任务管理系统，分享实战经验：解决登录状态管理、拖拽排序、WebSocket实时同步、虚拟滚动优化性能及Docker部署等问题，适合全栈开发学习参考。

数据可视化

TypeScript

服务器

GitHub

JSON

腾讯云大数据特惠专场


4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

我用Vue3做了个任务管理系统，踩了不少坑

我用Vue3做了个任务管理系统，踩了不少坑

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐