基于UniApp与Vue3语法糖的实时任务管理应用开发实践

一、核心功能架构设计

1.1 模块拆分策略

采用MVVM架构设计，将应用拆分为三个核心模块：

数据层：使用Pinia进行状态管理，存储任务列表、筛选条件等全局状态
视图层：通过组件化开发实现任务卡片、筛选面板等UI单元

逻辑层 ：封装网络请求、本地存储等跨端兼容逻辑

javascript 复制代码

// stores/taskStore.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useTaskStore = defineStore('task', () => {
  const taskList = ref([]) // 任务列表
  const filterType = ref('all') // 当前筛选类型
  
  // 添加任务方法
  const addTask = (task) => {
    taskList.value.unshift({
      id: Date.now(),
      ...task,
      createTime: new Date().toISOString()
    })
  }
  
  return { taskList, filterType, addTask }
})

1.2 跨端兼容方案

针对不同平台特性实现差异化处理：

网络请求 ：使用uni.request封装统一请求工具
本地存储 ：优先使用uni.setStorageSync，兼容H5的localStorage

日期格式化 ：通过@dcloudio/uni-ui的uni-dateformat组件实现

javascript 复制代码

// utils/request.js
export const http = (options) => {
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: (res) => {
        if (res.statusCode === 200) resolve(res.data)
        else reject(res)
      },
      fail: reject
    })
  })
}

二、Vue3语法糖实战应用

2.1 响应式数据管理

使用ref和reactive实现任务状态的精细控制：

html 复制代码

<!-- components/TaskCard.vue -->
<template>
  <view class="task-card" :class="{ completed: task.completed }">
    <checkbox :value="task.completed" @change="toggleComplete" />
    <text class="task-title">{{ task.title }}</text>
    <uni-dateformat :date="task.createTime" format="yyyy/MM/dd" />
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import uniDateformat from '@dcloudio/uni-ui/lib/uni-dateformat/uni-dateformat.vue'

const props = defineProps({
  task: { type: Object, required: true }
})

const emit = defineEmits(['update'])

const toggleComplete = (e) => {
  emit('update', { ...props.task, completed: e.detail.value })
}
</script>

2.2 计算属性优化

利用computed实现动态筛选逻辑：

html 复制代码

<!-- pages/index.vue -->
<template>
  <view class="container">
    <filter-panel @filter="handleFilter" />
    <task-card 
      v-for="task in filteredTasks" 
      :key="task.id"
      :task="task"
      @update="updateTask"
    />
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useTaskStore } from '@/stores/taskStore'
import FilterPanel from '@/components/FilterPanel.vue'
import TaskCard from '@/components/TaskCard.vue'

const taskStore = useTaskStore()

// 计算属性实现筛选
const filteredTasks = computed(() => {
  if (taskStore.filterType === 'completed') {
    return taskStore.taskList.filter(t => t.completed)
  }
  return taskStore.taskList
})

const handleFilter = (type) => {
  taskStore.filterType = type
}
</script>

2.3 生命周期钩子应用

精准控制组件生命周期：

html 复制代码

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// Vue生命周期
onMounted(() => {
  console.log('组件挂载完成')
})

// UniApp页面生命周期
onShow(() => {
  console.log('页面显示')
  // 可以在这里执行数据刷新
})

onHide(() => {
  console.log('页面隐藏')
  // 清理定时器等资源
})
</script>

三、高级特性实现

3.1 自定义指令开发

实现拖拽排序功能：

javascript 复制代码

// directives/drag.js
export default {
  mounted(el, binding) {
    let startX, startY, startIndex
    
    el.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX
      startY = e.touches[0].clientY
      startIndex = Array.from(el.parentNode.children).indexOf(el)
    })
    
    el.addEventListener('touchmove', (e) => {
      const moveX = e.touches[0].clientX - startX
      const moveY = e.touches[0].clientY - startY
      el.style.transform = `translate(${moveX}px, ${moveY}px)`
    })
    
    el.addEventListener('touchend', () => {
      el.style.transform = 'none'
      binding.value({ startIndex, endIndex: /* 计算最终位置 */ })
    })
  }
}

使用方式：

html 复制代码

<task-card 
  v-for="(task, index) in tasks" 
  v-drag="handleDrag"
  :key="task.id"
/>

3.2 动态组件与异步加载

实现按需加载组件：

html 复制代码

<template>
  <component 
    :is="currentComponent" 
    v-if="componentLoaded"
  />
  <view v-else class="loading">加载中...</view>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

const currentComponent = ref('TaskList')
const componentLoaded = ref(false)

// 动态导入组件
const loadComponent = async () => {
  const comp = defineAsyncComponent(() => 
    import(`@/components/${currentComponent.value}.vue`)
  )
  await comp().then(() => componentLoaded.value = true)
}

loadComponent()
</script>

3.3 跨端样式处理

使用SCSS实现响应式布局：

css 复制代码

/* styles/variables.scss */
$primary-color: #007AFF;
$card-padding: 20rpx;

/* components/TaskCard.vue */
<style lang="scss" scoped>
.task-card {
  padding: $card-padding;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  
  &.completed {
    .task-title {
      text-decoration: line-through;
      color: #999;
    }
  }
  
  @media (min-width: 768px) {
    // H5端特殊样式
    margin: 20px;
    padding: 30px;
  }
}
</style>

四、性能优化与调试技巧

4.1 渲染性能优化

虚拟滚动 ：对于长列表使用uni-list组件实现虚拟滚动
图片懒加载 ：使用lazy-load属性延迟加载图片

防抖节流 ：对滚动、搜索等高频事件进行节流处理

javascript 复制代码

// utils/debounce.js
export function debounce(fn, delay) {
  let timer = null
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

// 使用示例
const handleScroll = debounce(() => {
  console.log('滚动事件处理')
}, 200)