React、Vue3、Svelte 写法大 PK

本文将会从响应式、模板、生命周期、组件、表单、网络请求等几个方面，来对比 React、Vue3、Svelte 三大流行组件的用法区别。

响应式 - 状态

React

Vue3

Svelte

响应式 - 更新状态

React

Vue3

Svelte

响应式 - 状态计算

React

Vue3

Svelte

模板 - 最小模板

React

Vue3

Svelte

模板 - 样式

React

Vue3

Svelte

模板 - 循环

React

Vue3

Svelte

模板 - 事件

React

Vue3

Svelte

模板 - Dom ref

React

Vue3

Svelte

模板 - 条件判断

React

Vue3

Svelte

生命周期 - 初始化

React

Vue3

Svelte

生命周期 - 卸载

React

Vue3

Svelte

组件 - Props

React

App.jsx

UserProfile.jsx

Vue3

App.vue

UserProfile.vue

Svelte

App.svelte

UserProfile.svelte

表单 - 文本框

React

Vue3

Svelte

表单 - 复选框

React

Vue3

Svelte

表单 - Radio

React

Vue3

Svelte

表单 - Select

React

Vue3

Svelte

Web 应用 - 渲染

React

index.html

App.jsx

Main.jsx

Vue3

index.html

App.vue

main.js

Svelte

index.html

App.js

App.svelte

Web 应用 - 获取数据

React

App.jsx

useFetchUsers.js

Vue3

App.vue

useFetchUsers.js

Svelte

App.svelte

useFetchUsers.js

Web 应用 - 路由链接

React

Vue3

Svelte

Web 应用 - 路由

React

NextJS

Vue3

Nuxt 3

Svelte

SvelteKit

最后

大家觉得哪种用法最舒服？欢迎在评论区留言！

参考：https://component-party.dev/