加入 Web 组件 JavaScript 框架派对

在一个网站里，你可以比较主流 Web 组件 JavaScript 框架在常见任务上的语法差异。这有什么用呢？
' @' M' c4 q. O+ B, ?( a我们都知道 JavaScript 框架的生态环境有多碎片化。从某种意义上说，你可以划分出两个时代：React 出现之前和之后。
在 React 出现之前：
  Q+ D+ Q4 i! `& p

• jQuery 是构建网页最流行的方式。它认可网站的本质，即 DOM 节点树。
  6 s6 \2 G' C  v8 n6 V' P$ Y2 x& \
• Backbone.js 发明了模型 - 视图 - 控制器模式。每当模型发生变化，所有关注该模型状态的视图都会重新渲染。
  
• AngularJS 采用了双向数据绑定，这有利有弊。在实际应用中，隐式的状态变化通常会导致代码难以理解和调试。
  6 G' u# h+ ]* `( ?2 G

React 出现之后，情况变得更加复杂，生态系统中可不只有 React。大量框架涌入 JavaScript 领域，像 Vue、Qwik、Million.js、Astro、Remix、SvelteKit 等等，数不胜数。
每个框架都有独特之处，并且都宣称比其他框架性能更优。似乎只要开发者对某个框架的某项功能不满意，觉得不符合自己的想法，解决办法就是创建一个新框架！事情一直都是这样。
当然，不同框架的采用程度各不相同，所以许多 JavaScript 开发者并不熟悉每一个框架的语法和特性。
如果有个工具能展示在不同框架中如何完成相同任务，对于开发者来说将非常有帮助，这有助于他们选择最适合手头项目的框架，或者通过对比语法，将知识从一个框架迁移到另一个框架。
( G& v0 [3 r- K别担心，“组件派对” 网站Component Party应运而生！这个网站简化了不同 JavaScript 框架的复杂概述，便于大家理解。
$ U1 X& y2 O. x3 D1 |+ e网站涵盖的框架包括：

1 }, t# ^. ^% c" c! m* @
• React
  % a& ~1 F& t& g8 s+ h, p8 c8 c4 g
• Vue 3
  
• Angular
  
• Angular Renaissance
  
• Lit
  
• Vue 2
  % u) d* M% u! y- [
• Ember Octane
  
• Solid.js
  
• Alpine
  + D: i0 {* s5 w% U
• Svelte 5
  
• Ember Polaris（预览版）
  ( i* C! G4 G* H
• Mithril
  
• Aurelia 2
  
• Qwik
  8 x1 X& g9 P  H  g7 a  Q
• Marko
  
• Aurelia 1
  $ ]9 A0 j" H2 E

网站从每个框架的角度展示的常见任务示例有：

2 o: z. ]; L  q  M8 f% U- j! N' S
• 响应性：声明状态、更新状态、计算状态
  
• 模板：最简模板、样式设置、循环、点击事件
  
• 生命周期：挂载时、卸载时
  4 k6 |- {' U) X7 p+ J3 `- p
• 组件组合：属性、向父组件传递事件、插槽、插槽后备内容、上下文
  

该网站的界面是用 Vite 和 Svelte 构建的，不仅美观，而且用户体验友好。你只需从工具栏中选择框架，就能看到在各个框架中如何完成任务。例如，选择 React、Svelte 5 和 Vue，然后查看 “响应性 / 声明状态”，你会看到：

& I0 s& l1 C) ~( o$ e) F$ O

响应性：声明状态
3 `! k0 }, e1 ?( \

• React（Name.jsx）
  - s" b  p, [. M& ]% q: b  O

import {useState} from "react";export default function Name() {    const [name] = useState("John");    return <h1>Hello {name}</h1>;}

5 B& T7 z$ ~3 c& R# }; k, o
• Svelte 5（Name.svelte）
  : b; N8 `7 j( B6 \  _% j0 r3 G

<script>    let name = $state("John");</script><h1>Hello {name}</h1>
- m$ p3 C2 f* c5 f* S$ a

6 C3 |# D# T% l" t8 ^# {% h9 ~
• Vue 3（Name.vue）
  ! L$ j6 r7 Q, @6 I' C

<script setup>import { ref } from "vue";const name = ref("John");</script><template>    <h1>Hello {{ name }}</h1></template>这样能让你快速了解不同框架在完成特定任务时的情况，非常实用。
- `& g0 Q/ I, n* n除了在线演示，你还可以通过在 GitHub 上复刻仓库GitHub - matschik/component-party.dev: Web component JS frameworks overview by their syntax and features，自行搭建 “组件派对”。
所以，如果你想更换框架，或者只是想自我提升，欢迎加入这场 “派对”！

- k1 t; p* g3 q