加入 Web 组件 JavaScript 框架派对

在一个网站里，你可以比较主流 Web 组件 JavaScript 框架在常见任务上的语法差异。这有什么用呢？
" A6 U7 F6 K( G* r+ ^/ B5 f我们都知道 JavaScript 框架的生态环境有多碎片化。从某种意义上说，你可以划分出两个时代：React 出现之前和之后。
在 React 出现之前：

* h$ h3 @; q6 r' W2 E
• jQuery 是构建网页最流行的方式。它认可网站的本质，即 DOM 节点树。
  
• Backbone.js 发明了模型 - 视图 - 控制器模式。每当模型发生变化，所有关注该模型状态的视图都会重新渲染。
  ! {) M- ]  ]* \
• AngularJS 采用了双向数据绑定，这有利有弊。在实际应用中，隐式的状态变化通常会导致代码难以理解和调试。
  ' I+ z% E2 N1 v9 y1 l# y

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

• React
  $ N$ r6 f6 \* ]+ ~; E5 [; a
• Vue 3
  
• Angular
  7 P- q7 W$ P$ t4 O$ M2 ]
• Angular Renaissance
  
• Lit
  9 g7 h+ k6 f! K9 a  F5 v( N9 S, R
• Vue 2
  % w. `% N, r) f, p( T: t
• Ember Octane
  
• Solid.js
  
• Alpine
  
• Svelte 5
  
• Ember Polaris（预览版）
  
• Mithril
  ' K; U3 ~" J* U- b7 j
• Aurelia 2
  ! z8 Q  {3 k9 b3 q
• Qwik
  
• Marko
  
• Aurelia 1
  

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

• 响应性：声明状态、更新状态、计算状态
  " U( ?# b& F5 @" R* H- ]
• 模板：最简模板、样式设置、循环、点击事件
  
• 生命周期：挂载时、卸载时
  ) e# ]8 |# ]" ^. P! r2 s. x
• 组件组合：属性、向父组件传递事件、插槽、插槽后备内容、上下文
  

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

! K) j" ^$ S0 K0 R% q响应性：声明状态

. l; l! ]9 v. |3 ]) @
• React（Name.jsx）
  

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

6 I) u8 M4 G2 b! E3 y6 @3 F
• Svelte 5（Name.svelte）
  - I6 ?0 I5 A$ F8 R

<script>    let name = $state("John");</script><h1>Hello {name}</h1>
6 i7 w4 ^1 i! |" ]/ |  W2 w! ]7 ]- A

+ u' M; e5 ~1 `0 A
• Vue 3（Name.vue）
  

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

. c" ?4 a2 }4 F0 O