在开发Casual UI (opens new window)的过程中，对 Vue3, React17, Svelte3 各自的生态有了一定程度的了解，这里进行一些总结
# 框架特性
| 细化 | Vue3 | React17 | Svelte3 |
|---|---|---|---|
| 语法 | 模板语法（SFC） & JSX（借助插件） | JSX | Script + 类 JSX 模板 |
| 响应式 API | 独立&模板耦合 | JSX 耦合 | 模板耦合 |
| 依赖追踪 | 自动 | 手动 | 半自动 |
| 运行时 | 有 | 有 | 无 |
| 编译时 | 有（如：Reactivity Transform (opens new window)） | 无 | 有 |
| 数据流 | 可双向 | 单向 | 可双向 |
| Scoped Style | 支持 | 不支持 | 支持 |
# 创建项目(Starter)
- Vue：create-vue (opens new window)，init vite (opens new window)，vite-plugin-ssr (opens new window)，create-nuxt-app (opens new window)
- React：create-react-app (opens new window)，init vite (opens new window)，create-nextjs-app (opens new window)，create-remix (opens new window)
- Svelte：sveltekit (opens new window)，init vite (opens new window)
其中：
- vite-plugin-ssr，create-nuxt-app，create-nextjs-app，create-remix，sveltekit 都为 SSR 框架
- init vite 为基于 vite 的生态，可以创建多种基于多种不同 web 框架的项目
# 路由
- Vue：Vue Router (opens new window)
- React：react-router-dom (opens new window)
- Svelte：svelte-spa-router (opens new window)，svelte-routing (opens new window)
其中，Vue Router 为官方库
# 状态管理
- Vue：Vuex (opens new window)，Pinia (opens new window)
- React：Redux (opens new window)，Mobx (opens new window)，Recoil (opens new window)，Jotai (opens new window)，Rematch (opens new window)，Zustand (opens new window)
- Svelte：svelte/store (opens new window)
其中：Pinia，Vuex 为官方库，svelte/store 为官方内置支持
# 服务端渲染（SSR）
- Vue：vite-plugin-ssr (opens new window)，quasar (opens new window)，nuxt (opens new window)
- React：nextjs (opens new window)，remix (opens new window)
- Svelte：sveltekit (opens new window)
# 文档/静态站点工具
- Vue: Vuepress (opens new window)，Vitepress (opens new window)，Storybook (opens new window)
- React: Docusaurus (opens new window)，Gatsby (opens new window)，Storybook (opens new window)
- Svelte：Svelte Docs (opens new window)，Sveltekit (opens new window)，Storybook (opens new window)
# UI 组件库
- Vue：Element Plus (opens new window)，Ant Design Vue (opens new window)，Quasar (opens new window)，Vant (opens new window)
- React: Ant Design (opens new window)，MUI (opens new window)
- Svelte: Svelte Material UI (opens new window)
# 总结
可以看到
- React 在社区贡献上的积累非常丰富，每个工具方向都有很多选择可以尝试
- Vue 官方几乎给出了一整套你有可能会用到的库以及工具链，并且 UI 库特别丰富
- Svelte 社区生态还不够完善，但是官方工具 Sveltekit 单页应用、预渲染、服务端渲染都能胜任
除此之外，有一些能够兼容三个框架的工具以及类库，像：Vite (opens new window)、Storybook (opens new window)
希望这篇总结可以对新项目的技术栈选型起到一些帮助