基于Vue 3 Composition API构建的现代化任务管理解决方案
Vue 3 Composition API 核心概念
Vue 3引入了Composition API，这是一种基于函数的API，允许更好地组织和复用组件逻辑。与Options API相比，Composition API提供了更灵活的代码组织方式，特别是对于复杂组件。
任务管理应用实战
添加新任务
低
中
高
{{ category }}
所有优先级
高优先级
中优先级
低优先级
所有分类
{{ category }}
创建时间
标题
优先级
升序
降序
任务列表 ({{ filteredTasks.length }})
暂无任务，请添加新任务或调整筛选条件
{{ task.title }}
{{ task.description }}
Vue 3 核心特性应用
Reactive 数据管理
使用 reactive 和 ref 创建响应式数据：
// 创建响应式任务列表
const tasks = ref([]);
// 创建响应式对象
const newTask = reactive({
title: '',
description: '',
priority: 'medium',
category: '工作',
completed: false
});
Computed 属性
使用 computed 创建基于响应式数据的计算属性：
// 过滤和排序任务
const filteredTasks = computed(() => {
let result = [...tasks.value];
// 过滤逻辑
if (filterPriority.value !== 'all') {
result = result.filter(task => task.priority === filterPriority.value);
}
if (filterCategory.value !== 'all') {
result = result.filter(task => task.category === filterCategory.value);
}
// 排序逻辑
result.sort((a, b) => {
// 排序实现
});
return result;
});
生命周期钩子
使用 onMounted 在组件挂载时执行操作：
// 组件挂载时从本地存储加载数据
onMounted(() => {
const savedTasks = localStorage.getItem('vue3-tasks');
if (savedTasks) {
tasks.value = JSON.parse(savedTasks);
}
});
Watch 监听器
使用 watch 监听数据变化并执行副作用：
// 监听任务列表变化，保存到本地存储
watch(tasks, (newTasks) => {
localStorage.setItem('vue3-tasks', JSON.stringify(newTasks));
}, { deep: true });
const { createApp, ref, reactive, computed, watch, onMounted } = Vue;
const app = createApp({
setup() {
// 应用状态
const appTitle = ref(‘Vue 3任务管理器’);
// 任务数据
const tasks = ref([]);
const newTask = reactive({
title: ”,
description: ”,
priority: ‘medium’,
category: ‘工作’,
completed: false
});
// 分类选项
const categories = ref([‘工作’, ‘个人’,学习’, ‘购物’, ‘健康’]);
// 筛选和排序
const filterPriority = ref(‘all’);
const filterCategory = ref(‘all’);
const sortBy = ref(‘createdAt’);
const sortOrder = ref(‘desc’);
// 添加新任务
function addTask() {
if (!newTask.title.trim()) return;
tasks.value.push({
id: Date.now(),
title: newTask.title,
description: newTask.description,
priority: newTask.priority,
category: newTask.category,
completed: false,
createdAt: new Date()
});
// 重置表单
newTask.title = ”;
newTask.description = ”;
newTask.priority = ‘medium’;
newTask.category = ‘工作’;
}
// 删除任务
function deleteTask(id) {
tasks.value = tasks.value.filter(task => task.id !== id);
}
// 编辑任务
function editTask(task) {
// 在实际应用中，这里可以打开编辑模态框
console.log(‘编辑任务:’, task);
}
// 获取优先级文本
function getPriorityText(priority) {
const priorityMap = {
‘high’: ‘高’,
‘medium’: ‘中’,
‘low’: ‘低’
};
return priorityMap[priority] || priority;
}
// 格式化日期
function formatDate(date) {
return new Date(date).toLocaleDateString(‘zh-CN’);
}
// 计算属性：过滤和排序任务
const filteredTasks = computed(() => {
let result = […tasks.value];
// 过滤
if (filterPriority.value !== ‘all’) {
result = result.filter(task => task.priority === filterPriority.value);
}
if (filterCategory.value !== ‘all’) {
result = result.filter(task => task.category === filterCategory.value);
}
// 排序
result.sort((a, b) => {
let modifier = 1;
if (sortOrder.value === ‘desc’) modifier = -1;
if (sortBy.value === ‘title’) {
return a.title.localeCompare(b.title) * modifier;
} else if (sortBy.value === ‘priority’) {
const priorityOrder = { high: 3, medium: 2, low: 1 };
return (priorityOrder[a.priority] – priorityOrder[b.priority]) * modifier;
} else {
return (new Date(a.createdAt) – new Date(b.createdAt)) * modifier;
}
});
return result;
});
// 监听任务变化，保存到本地存储
watch(tasks, (newTasks) => {
localStorage.setItem(‘vue3-tasks’, JSON.stringify(newTasks));
}, { deep: true });
// 组件挂载时从本地存储加载数据
onMounted(() => {
const savedTasks = localStorage.getItem(‘vue3-tasks’);
if (savedTasks) {
tasks.value = JSON.parse(savedTasks);
}
});
// 暴露给模板
return {
appTitle,
tasks,
newTask,
categories,
filterPriority,
filterCategory,
sortBy,
sortOrder,
addTask,
deleteTask,
editTask,
getPriorityText,
formatDate,
filteredTasks
};
}
});
app.mount(‘#app’);
