在一个网站里，你可以比较主流 Web 组件 JavaScript 框架在常见任务上的语法差异。这有什么用呢？
我们都知道 JavaScript 框架的生态环境有多碎片化。从某种意义上说，你可以划分出两个时代：React 出现之前和之后。
在 React 出现之前：
- jQuery 是构建网页最流行的方式。它认可网站的本质，即 DOM 节点树。
- Backbone.js 发明了模型 - 视图 - 控制器模式。每当模型发生变化，所有关注该模型状态的视图都会重新渲染。
- AngularJS 采用了双向数据绑定，这有利有弊。在实际应用中，隐式的状态变化通常会导致代码难以理解和调试。
React 出现之后，情况变得更加复杂，生态系统中可不只有 React。大量框架涌入 JavaScript 领域，像 Vue、Qwik、Million.js、Astro、Remix、SvelteKit 等等，数不胜数。
每个框架都有独特之处，并且都宣称比其他框架性能更优。似乎只要开发者对某个框架的某项功能不满意，觉得不符合自己的想法，解决办法就是创建一个新框架！事情一直都是这样。
当然，不同框架的采用程度各不相同，所以许多 JavaScript 开发者并不熟悉每一个框架的语法和特性。
如果有个工具能展示在不同框架中如何完成相同任务，对于开发者来说将非常有帮助，这有助于他们选择最适合手头项目的框架，或者通过对比语法，将知识从一个框架迁移到另一个框架。
别担心，“组件派对” 网站Component Party应运而生！这个网站简化了不同 JavaScript 框架的复杂概述，便于大家理解。
网站涵盖的框架包括：
- React
- Vue 3
- Angular
- Angular Renaissance
- Lit
- Vue 2
- Ember Octane
- Solid.js
- Alpine
- Svelte 5
- Ember Polaris（预览版）
- Mithril
- Aurelia 2
- Qwik
- Marko
- Aurelia 1
网站从每个框架的角度展示的常见任务示例有：
- 响应性：声明状态、更新状态、计算状态
- 模板：最简模板、样式设置、循环、点击事件
- 生命周期：挂载时、卸载时
- 组件组合：属性、向父组件传递事件、插槽、插槽后备内容、上下文
该网站的界面是用 Vite 和 Svelte 构建的，不仅美观，而且用户体验友好。你只需从工具栏中选择框架，就能看到在各个框架中如何完成任务。例如，选择 React、Svelte 5 和 Vue，然后查看 “响应性 / 声明状态”，你会看到：
响应性：声明状态
- React（Name.jsx）
import {useState} from "react";
export default function Name() {
const [name] = useState("John");
return Hello {name}
;
}- Svelte 5（Name.svelte）
<script>
let name = $state("John");
</script>
Hello {name}
- Vue 3（Name.vue）
<script setup>
import { ref } from "vue";
const name = ref("John");
</script>
Hello {{ name }}
这样能让你快速了解不同框架在完成特定任务时的情况，非常实用。
除了在线演示，你还可以通过在 GitHub 上复刻仓库GitHub -
matschik/component-party.dev: Web component JS frameworks overview by their syntax and features，自行搭建 “组件派对”。
所以，如果你想更换框架，或者只是想自我提升，欢迎加入这场 “派对”！