React、Vue、Svelte 入门与对比

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

1. React 入门

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

安装与初始化

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

基本示例

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。

安装与初始化

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

基本示例

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

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
</script>

特点：

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

3. Svelte 入门

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

安装与初始化

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

基本示例

<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 + 内置指令
生态与社区	最大，丰富的库与工具	大，适合中小型项目	小，但增长快速
性能	虚拟 DOM，运行时更新	虚拟 DOM，响应式更新	编译时优化，运行时开销低
学习曲线	中等，需要理解 JSX 与状态	低，模板直观易懂	低，语法简洁

5. 总结

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

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