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

一、核心功能架构设计

1.1 模块拆分策略

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

• 数据层：使用Pinia进行状态管理，存储任务列表、筛选条件等全局状态
• 视图层：通过组件化开发实现任务卡片、筛选面板等UI单元
• 逻辑层：封装网络请求、本地存储等跨端兼容逻辑

  // 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组件实现

  // 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实现任务状态的精细控制：

  <!-- 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实现动态筛选逻辑：

  <!-- 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 生命周期钩子应用

  精准控制组件生命周期：

  <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 自定义指令开发

  实现拖拽排序功能：

  // 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: /* 计算最终位置 */ })
      })
    }
  }

  使用方式：

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

  3.2 动态组件与异步加载

  实现按需加载组件：

  <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实现响应式布局：

  /* 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属性延迟加载图片
• 防抖节流：对滚动、搜索等高频事件进行节流处理

  // 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)