在一个网站里，你可以比较主流 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>

这样能让你快速了解不同框架在完成特定任务时的情况，非常实用。

除了在线演示，你还可以通过在 GitHub 上复刻仓库GitHub -
matschik/component-party.dev: Web component JS frameworks overview by their syntax and features，自行搭建 “组件派对”。

所以，如果你想更换框架，或者只是想自我提升，欢迎加入这场 “派对”！