常用框架

本文聚焦 React 与 Vue 3 两个主流框架的核心 API,并简要对比 Svelte 的设计思路。

React:函数组件与 Hooks

React 推荐使用函数组件,通过 Hooks 复用状态与副作用。useState 提供响应式状态,useEffect 处理副作用,接受依赖数组控制执行时机。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

常用 Hooks 还有 useContext(跨组件共享状态)、useReducer(复杂状态管理)、useMemo 与 useCallback(性能优化)。

Vue 3:组合式 API

Vue 3 提供选项式 API 与组合式 API。组合式 API 在 setup 函数中使用 ref、reactive、computed、watch 等 API,逻辑按关注点组织而非按选项分组。

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

const count = ref(0);
const double = computed(() => count.value * 2);
</script>

<template>
  <button @click="count++">{{ count }} / {{ double }}</button>
</template>

ref 包装基本类型,.value 访问;reactive 包装对象,直接访问属性;computed 派生响应式值;watch 监听数据变化执行副作用。

Svelte 概念对比

Svelte 采用编译时优化,在构建阶段将组件编译为高效的原生 JavaScript,无需运行时虚拟 DOM。语法上使用单文件 .svelte,在 <script> 中直接编写响应式赋值 $: 即可声明派生值。框架体积小、运行性能高,但生态相对小,适合追求极致性能与简洁语法的场景。

框架选型参考

React 生态最广、灵活度最高,适合复杂应用;Vue 3 学习曲线平缓,模板与组合式 API 双模式兼顾不同背景开发者;Svelte 适合中小型项目与性能敏感场景。选型应综合团队经验、生态与项目需求。