# React、Vue、Svelte 入门与对比

URL: https://caijiao.org/posts/33
Source: docs/posts/33.md
Description: 本文介绍了 React、Vue、Svelte 三大前端框架的入门示例与核心特性对比，帮助初学者快速理解各自优劣与适用场景。

随着现代前端开发的发展，[React](/react/)、Vue 和 Svelte 成为最受欢迎的三大前端框架。本文将通过入门示例和核心特性对比，帮助你快速理解它们的区别与适用场景。

## 1. React 入门

React 是由 Facebook 推出的组件化前端库，使用 **JSX** 语法，强调声明式 UI。

### 安装与初始化

```bash
npx create-react-app my-app
cd my-app
npm start
````

### 基本示例

```jsx
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>React 计数器</h1>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

export default App;
```

**特点：**

* JSX 模板与逻辑结合
* 单向数据流
* 强大的生态与社区支持

## 2. Vue 入门

Vue 是由尤雨溪开发的渐进式框架，使用 **模板语法**，响应式数据驱动 UI。

### 安装与初始化

```bash
npm init vue@latest
cd my-vue-app
npm install
npm run dev
```

### 基本示例

```vue
<template>
  <div>
    <h1>Vue 计数器</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>


```

**特点：**

* 模板语法简洁直观
* 双向数据绑定（`v-model`）
* 响应式系统自动追踪依赖

## 3. Svelte 入门

Svelte 是一种编译型框架，组件在构建时会被编译为高效的原生 [JavaScript](/javascript/)，运行时开销低。

### 安装与初始化

```bash
npm create svelte@latest my-svelte-app
cd my-svelte-app
npm install
npm run dev
```

### 基本示例

```svelte
<script>
  let count = 0;
</script>

<main>
  <h1>Svelte 计数器</h1>
  <p>当前计数: {count}</p>
  <button on:click={() => count++}>增加</button>
</main>
```

**特点：**

* 编译时优化，无虚拟 DOM
* 写法简洁，响应式自动追踪
* 小巧且高性能

## 4. 核心对比

| 特性    | React           | Vue          | Svelte       |
| ----- | --------------- | ------------ | ------------ |
| 数据绑定  | 单向数据流           | 双向数据绑定       | 单向数据流，自动响应式  |
| 模板语法  | JSX             | [HTML](/html/) 模板      | HTML + 内置指令  |
| 生态与社区 | 最大，丰富的库与工具      | 大，适合中小型项目    | 小，但增长快速      |
| 性能    | 虚拟 DOM，运行时更新    | 虚拟 DOM，响应式更新 | 编译时优化，运行时开销低 |
| 学习曲线  | 中等，需要理解 JSX 与状态 | 低，模板直观易懂     | 低，语法简洁       |

## 5. 总结

* **React**：生态最强大，适合大型项目，学习曲线适中。
* **Vue**：模板友好，开发效率高，适合中小型项目。
* **Svelte**：轻量高效，适合追求性能和简单项目，但生态相对小。

根据项目需求和团队技术栈选择合适的框架，是提高开发效率的关键。