Vue3 Composition API 实战教程：构建动态任务管理器 | 前端开发指南

const { createApp, ref, reactive, computed, onMounted, watch } = Vue;

const app = createApp({
setup() {
// 使用ref创建响应式基本类型数据
const newTask = ref(”);
const filter = ref(‘all’);

// 使用reactive创建响应式对象
const state = reactive({
tasks: [],
nextId: 1
});

// 从localStorage加载数据
const loadTasks = () => {
const savedTasks = localStorage.getItem(‘vue3-tasks’);
if (savedTasks) {
const parsed = JSON.parse(savedTasks);
state.tasks = parsed.tasks;
state.nextId = parsed.nextId;
}
};

// 保存数据到localStorage
const saveTasks = () => {
localStorage.setItem(‘vue3-tasks’, JSON.stringify({
tasks: state.tasks,
nextId: state.nextId
}));
};

// 使用computed创建计算属性
const filteredTasks = computed(() => {
switch (filter.value) {
case ‘active’:
return state.tasks.filter(task => !task.completed);
case ‘completed’:
return state.tasks.filter(task => task.completed);
default:
return state.tasks;
}
});

// 任务统计
const taskStats = computed(() => {
const total = state.tasks.length;
const completed = state.tasks.filter(task => task.completed).length;
const active = total – completed;
return { total, completed, active };
});

// 添加新任务
const addTask = () => {
if (newTask.value.trim()) {
state.tasks.push({
id: state.nextId++,
title: newTask.value.trim(),
completed: false,
createdAt: new Date()
});
newTask.value = ”;
saveTasks();
}
};

// 删除任务
const deleteTask = (id) => {
state.tasks = state.tasks.filter(task => task.id !== id);
saveTasks();
};

// 切换任务完成状态
const toggleTask = (id) => {
const task = state.tasks.find(task => task.id === id);
if (task) {
task.completed = !task.completed;
saveTasks();
}
};

// 清除已完成任务
const clearCompleted = () => {
state.tasks = state.tasks.filter(task => !task.completed);
saveTasks();
};

// 使用watch监听变化
watch(() => state.tasks, saveTasks, { deep: true });

// 使用onMounted生命周期钩子
onMounted(() => {
loadTasks();
});

// 返回模板中需要使用的数据和方法
return {
newTask,
filter,
state,
filteredTasks,
taskStats,
addTask,
deleteTask,
toggleTask,
clearCompleted
};
},
template: `

`
});

app.mount(‘#app’);