嘿，各位前端技术探索者们！👋
在这个前端技术栈爆炸式增长的时代，你是否也曾感到迷茫？Vue、React、Angular、Svelte、Preact、Solid… 甚至还有各种新兴的微前端、SSR、SSG 框架和方案。每当一个新项目开始，选择哪个框架就像是在超市里选择薯片口味一样困难：都说自己好吃，但总得亲自尝尝才知道哪个是你的菜，而尝遍所有又耗时耗力。
你是不是也遇到过这些“痛点”：
- 框架选择困难症？ 新项目启动，团队内部对技术栈争论不休，哪个性能好？哪个社区活跃？哪个上手快？
- 学习新框架无从下手？ 官方文档看完一头雾水，想找个实际例子跟着敲，又发现教程五花八门，质量参差不齐。
- 面试被问到各种框架的异同？ 感觉自己了解很多，但要说清它们的底层原理和设计哲学时，总是支支吾吾？
- 想深入理解前端架构和设计模式？ 仅仅停留在使用 API 的层面，想看清框架作者是如何思考和解决问题的？
如果以上任何一点戳中了你，那么恭喜你，今天你来对地方了！我今天要为大家隆重介绍一个前端界的“罗塞塔石碑”——一个让你在框架的汪洋大海中，找到清晰航向的宝藏项目：TodoMVC！
是的，你没听错，就是一个简单的待办事项列表应用！但它绝非你想象的那么简单。它是一个精心设计的、统一标准的、集合了几乎所有主流和新兴前端框架实现的前端技术对比与学习平台。
通过深入剖析 TodoMVC，你将：
- 一眼看透各大主流前端框架的本质差异与共同点。
- 快速掌握新框架的核心开发思想与最佳实践。
- 提升面试竞争力，让你在框架对比问题上游刃有余。
- 洞察前端技术发展趋势，站在巨人的肩膀上思考未来。
准备好了吗？让我们一起揭开 TodoMVC 的神秘面纱，开始这场前端框架的深度探索之旅！
一、TodoMVC 是什么？它为何如此独特？
1.1 TodoMVC 的核心理念：统一标准，多方实现
首先，让我们直奔主题。TodoMVC的全称是 “Todo Model-View-Controller”。顾名思义，它是一个以 MVC 架构模式为灵感，旨在展示和比较不同 JavaScript 框架和库如何实现同一个简单待办事项应用的项目。
它的核心理念极其纯粹且强大：
- 统一标准 (Specification)：TodoMVC 项目首先定义了一套非常详尽的、关于一个基础待办事项应用的功能和界面交互规范。例如：
- 用户可以添加新的待办事项。
- 用户可以编辑现有待办事项。
- 用户可以标记待办事项为已完成或未完成。
- 用户可以删除待办事项。
- 用户可以清空所有已完成的待办事项。
- 用户可以根据“全部”、“进行中”、“已完成”过滤待办事项。
- 状态（如剩余未完成事项数量）实时更新。
- 数据应持久化存储（通常使用 LocalStorage）。
- 以及一些细微的 CSS 样式和交互细节。
- 多方实现 (Multiple Implementations)：基于这套严格的规范，TodoMVC 邀请了几乎所有主流和新兴的 JavaScript 框架和库来分别实现这个待办事项应用。从老牌的 Backbone.js、AngularJS，到如今的 React、Vue、Angular、Svelte，再到一些更轻量级或实验性的框架，你都能在其中找到对应的实现。
你可以把 TodoMVC 想象成一场编程界的“同题作文”大赛：题目都是“写一个待办事项应用”，但参赛选手（各种框架）用各自独特的“文风”（框架设计哲学和实现方式）来完成这篇作文。通过对比这些不同的“作文”，你就能清晰地看到每种“文风”的优点和特点。
1.2 它为何如此独特？价值几何？
TodoMVC 的独特性和巨大价值体现在以下几个方面：
1.2.1 前端框架的“罗塞塔石碑”
就像古埃及的罗塞塔石碑通过记录同一种文字的三种不同书写系统（象形文字、世俗体、古希腊文）帮助人们解读古埃及文化一样，TodoMVC 则是前端框架的“罗塞塔石碑”。它提供了一个标准化的对照组，让你在熟悉的基础功能上，直接深入不同框架的核心语法、组件化思想、数据流管理、生命周期、性能优化侧重点等。
1.2.2 最棒的“开箱即用”学习资料
对于初学者来说，学习新框架最大的障碍之一就是找不到一个既简单又能覆盖核心功能的“入门级”项目。官方示例往往过于简单，而实际项目又过于复杂。TodoMVC 完美地解决了这个痛点——它提供了一个功能完整但复杂度适中的应用程序，每个实现都是由对应框架的社区成员或核心开发者维护，确保了代码的规范性和最佳实践。
1.2.3 评估和比较框架的“基准测试”
对于需要选择框架的团队或个人来说，TodoMVC 提供了一个公平的“竞技场”。你可以：
- 直观比较代码量和复杂性：看看实现相同功能，不同框架需要多少代码量，结构如何。
- 感受开发体验：不同的数据流、组件声明方式、模板语法，哪种更符合你的直觉或团队习惯。
- 深入理解框架设计哲学：例如，React 的“函数式 UI”和单向数据流，Vue 的“响应式数据绑定”和声明式模板，Svelte 的“编译时优化”等，都能在 TodoMVC 的实现中得到印证。
1.2.4 前端历史的“活化石”与“风向标”
TodoMVC 不仅包含了当下最热门的框架，也收录了一些过去曾经流行但现在较少使用的框架实现。这使得它成为了一个前端技术演进的活字典。你可以看到前端技术是如何从 jQuery 时代，逐步发展到 MVC、MVVM 模式，再到组件化、虚拟 DOM、编译时优化的。同时，当有新的前端范式或框架出现时，TodoMVC 也会及时更新，成为未来技术发展的一个“风向标”。
二、TodoMVC 能解决你的哪些痛点？干货来了！
现在，让我们具体看看 TodoMVC 是如何帮助我们解决实际开发中遇到的各种痛点的。
2.1 痛点1：框架选择困难症？一键对比，心中有数！
这是很多团队和个人最头疼的问题。Vue 说自己易上手，React 说自己灵活强大，Angular 说自己企业级…到底谁说了算？
TodoMVC 提供了一个完美的“同台竞技”环境。你可以同时打开多个 TodoMVC 的框架实现，从代码层面进行最直观的对比。
核心对比点：
- 项目结构与文件组织： 不同的框架对项目结构有不同的倾向。例如，React 和 Vue 倾向于组件化，文件可能按组件拆分；Angular 则有严格的模块、组件、服务等组织方式。
- 数据管理模式： 这是一个核心差异点。
- React 通常强调单向数据流和不可变状态，可能结合 Redux、Context API 或 Zustand 等。
- Vue 则以其响应式系统和双向数据绑定著称，常结合 Vuex 或 Pinia。
- Angular 有自己的服务和 RxJS 响应式编程模型。
- Svelte 则是编译时生成高度优化的 JS，其数据响应式处理方式也与众不同。
- 组件通信方式： 父子组件、兄弟组件之间如何传递数据和事件？Prop、Emit、Context、Provide/Inject、事件总线、状态管理库等。
- 模板语法和渲染机制： JSX/TSX (React)、Vue 模板语法、Angular 模板语法，以及它们背后的虚拟 DOM、响应式更新、编译优化等。
- 代码量与可读性： 完成相同功能，哪个框架的代码更简洁、更易懂？这往往反映了框架的“魔法”程度和对开发者心智负担的影响。
示例分析：添加待办事项功能对比
我们以 TodoMVC 中最核心的“添加待办事项”功能为例，看看 React、Vue 和 Svelte 是如何实现它的。这个功能通常涉及到：用户输入、回车触发添加、清空输入框、更新待办事项列表。
todomvc/examples/react/src/App.js (React 18, Functional Component)
import { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid'; // 假设已安装uuid
import TodoItem from './TodoItem'; // 假设有TodoItem组件
const STORAGE_KEY = 'react-todos';
function App() {
const [todos, setTodos] = useState(() => {
// 从 localStorage 加载初始化数据
const storedTodos = localStorage.getItem(STORAGE_KEY);
return storedTodos ? JSON.parse(storedTodos) : [];
});
const [newTodo, setNewTodo] = useState('');
const [visibility, setVisibility] = useState('all');
// 持久化到 localStorage
useEffect(() => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
}, [todos]);
const addTodo = (e) => {
if (e.key !== 'Enter') return;
const val = newTodo.trim();
if (val) {
setTodos([...todos, {
id: uuidv4(),
title: val,
completed: false
}]);
setNewTodo(''); // 清空输入框
}
};
const filteredTodos = todos.filter(todo => {
if (visibility === 'active') return !todo.completed;
if (visibility === 'completed') return todo.completed;
return true;
});
const remaining = todos.filter(todo => !todo.completed).length;
return (
<section className="todoapp">
<header className="header">
<h1>todos</h1>
<input
className="new-todo"
placeholder="What needs to be done?"
autoFocus
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
onKeyDown={addTodo}
/>
</header>
<section className="main">
{todos.length > 0 && (
<input
id="toggle-all"
className="toggle-all"
type="checkbox"
checked={remaining === 0}
onChange={() => { /* Toggle all logic */ }}
/>
)}
<ul className="todo-list">
{filteredTodos.map(todo => (
<TodoItem key={todo.id} todo={todo} />
))}
</ul>
</section>
{/* Footer component for filters and clear completed */}
{todos.length > 0 && (
<footer className="footer">
<span className="todo-count">
<strong>{remaining}</strong> {remaining === 1 ? 'item' : 'items'} left
</span>
<ul className="filters">
<li><a href="#/all" className={visibility === 'all' ? 'selected' : ''} onClick={() => setVisibility('all')}>All</a></li>
<li><a href="#/active" className={visibility === 'active' ? 'selected' : ''} onClick={() => setVisibility('active')}>Active</a></li>
<li><a href="#/completed" className={visibility === 'completed' ? 'selected' : ''} onClick={() => setVisibility('completed')}>Completed</a></li>
</ul>
<button className="clear-completed">Clear completed</button>
</footer>
)}
</section>
);
}
export default App;
todomvc/examples/vue/src/App.vue (Vue 3, <script setup>)
<script setup>
import { ref, computed, watchEffect } from 'vue';
import { v4 as uuidv4 } from 'uuid'; // 假设已安装uuid
const STORAGE_KEY = 'vue-todos';
// 响应式状态
const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'));
const newTodo = ref('');
const visibility = ref('all'); // 'all', 'active', 'completed'
// 持久化到 localStorage
watchEffect(() => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value));
});
// 计算属性过滤 todos
const filteredTodos = computed(() => {
if (visibility.value === 'active') return todos.value.filter(todo => !todo.completed);
if (visibility.value === 'completed') return todos.value.filter(todo => todo.completed);
return todos.value;
});
// 计算属性：剩余未完成数量
const remaining = computed(() => todos.value.filter(todo => !todo.completed).length);
// 添加 todo
const addTodo = () => {
const val = newTodo.value.trim();
if (val) {
todos.value.push({
id: uuidv4(),
title: val,
completed: false
});
newTodo.value = ''; // 清空输入框
}
};
// 切换所有 todo 的完成状态
const toggleAll = computed({
get: () => remaining.value === 0,
set: (value) => {
todos.value.forEach(todo => {
todo.completed = value;
});
}
});
// 清除已完成 todo
const clearCompleted = () => {
todos.value = todos.value.filter(todo => !todo.completed);
};
// ... 其他方法，如 editTodo, removeTodo, toggleCompleted
</script>
<template>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input
class="new-todo"
autofocus
placeholder="What needs to be done?"
v-model="newTodo"
@keyup.enter="addTodo"
>
</header>
<section class="main" v-show="todos.length">
<input
id="toggle-all"
class="toggle-all"
type="checkbox"
v-model="toggleAll"
>
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<li v-for="todo in filteredTodos" :key="todo.id" :class="{ completed: todo.completed, editing: todo === editedTodo }">
<!-- Todo item rendering logic -->
</li>
</ul>
</section>
<footer class="footer" v-show="todos.length">
<span class="todo-count">
<strong>{
{ remaining }}</strong> {
{ remaining === 1 ? 'item' : 'items' }} left
</span>
<ul class="filters">
<li><a href="#/all" :class="{ selected: visibility === 'all' }" @click="visibility = 'all'">All</a></li>
<li><a href="#/active" :class="{ selected: visibility === 'active' }" @click="visibility = 'active'">Active</a></li>
<li><a href="#/completed" :class="{ selected: visibility === 'completed' }" @click="visibility = 'completed'">Completed</a></li>
</ul>
<button class="clear-completed" @click="clearCompleted" v-show="todos.length > remaining">
Clear completed
</button>
</footer>
</section>
</template>
todomvc/examples/svelte/src/main.js (Svelte)
<script>
import { v4 as uuidv4 } from 'uuid';
import { onDestroy, onMount } from 'svelte';
import { writable } from 'svelte/store';
const STORAGE_KEY = 'svelte-todos';
// Svelte store for todos
const todos = writable([]);
let newTodo = '';
let visibility = 'all'; // 'all', 'active', 'completed'
// Load from localStorage on mount
onMount(() => {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
todos.set(JSON.parse(stored));
}
});
// Persist to localStorage whenever todos change
const unsubscribe = todos.subscribe(currentTodos => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(currentTodos));
});
// Cleanup subscription on destroy
onDestroy(unsubscribe);
// Computed values (derived from stores)
$: filteredTodos = $todos.filter(todo => {
if (visibility === 'active') return !todo.completed;
if (visibility === 'completed') return todo.completed;
return true;
});
$: remaining = $todos.filter(todo => !todo.completed).length;
$: allCompleted = remaining === 0 && $todos.length > 0;
function addTodo() {
const val = newTodo.trim();
if (val) {
todos.update(currentTodos => [
...currentTodos,
{ id: uuidv4(), title: val, completed: false }
]);
newTodo = ''; // Clear input
}
}
function toggleAll() {
const shouldCompleteAll = remaining > 0;
todos.update(currentTodos =>
currentTodos.map(todo => ({ ...todo, completed: shouldCompleteAll }))
);
}
function clearCompleted() {
todos.update(currentTodos => currentTodos.filter(todo => !todo.completed));
}
</script>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
最低0.47元/天 解锁文章
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
