主流框架

框架/库	核心特性	关键技术
React	组件化开发、JSX语法、Props属性、State状态、Hooks(useState/useEffect/useContext等)	React JSX Hooks
Next.js 15+	App Router路由系统、Server Components服务器组件、Server Actions服务端动作、SSR/SSG混合渲染	App Router Server Components
Vue 3	Composition API、Setup语法糖、响应式系统ref/reactive、Pinia状态管理、Vue Router	Vue 3 Composition API
Nuxt 4	混合渲染模式、Vapor Mode性能优化、文件目录约定、自动化路由和API生成	Nuxt Vapor Mode
Svelte 5	Runes 响应式原语、Snippets 片段、$state 状态、$derived 派生、编译时框架	$state $derived Runes
SolidJS 1.8+	细粒度响应式、Signals 信号、无虚拟 DOM、JSX 语法、编译时优化	createSignal createEffect Signals
Qwik	可恢复性架构、零水合、QRL 惰性加载、序列化应用状态、即时交互	Qwik QRL 零水合
TanStack Query	React Query数据获取、缓存管理、自动重新获取、乐观更新、服务器状态管理标准	React Query TanStack Query

Vue 3 核心概念

概念	说明	示例
Composition API	基于函数的组织方式，逻辑复用更灵活，类型推断更优	setup() ref reactive
Setup 语法糖	script setup语法糖，更简洁的组件编写方式，自动返回响应式数据	<script setup>
响应式系统	ref处理基本类型，reactive处理对象，computed计算属性，watch/watchEffect监听	ref() reactive() computed()
生命周期	Composition API生命周期钩子：onMounted/onUpdated/onUnmounted等	onMounted onUnmounted
模板语法	双花括号插值、v-if/v-show条件渲染、v-for列表渲染、v-bind绑定	{{ msg }} v-for v-bind
组件通信	props/emit父子通信、provide/inject跨层级、Pinia状态管理、mitt事件总线	props emit provide
Vue Router 4	声明式路由、嵌套路由、路由守卫、动态路由、编程式导航	createRouter useRoute useRouter
Pinia 状态管理	Vue官方推荐状态管理，替代Vuex，TypeScript支持，组合式API风格	defineStore storeToRefs

Nuxt 元框架

特性	说明	关键配置
目录结构	pages目录自动生成路由、components自动导入、composables组合式函数	pages/ components/ composables/
渲染模式	SSR服务端渲染、CSR客户端渲染、SSG静态生成、ISR增量静态再生	ssr: true prerender
数据获取	useFetch统一数据获取、useAsyncData异步数据、useLazy延迟加载	useFetch useAsyncData
Server API	server/目录创建API端点，自动注册H3处理器，支持Nitro引擎	server/api/ server/routes/
模块系统	官方模块生态：@nuxt/image、@nuxtjs/tailwindcss、@pinia/nuxt等	modules nuxt.config.ts
混合渲染	页面级渲染模式控制、route rules规则配置、缓存策略	routeRules swr isr
Vapor Mode	基于Nitro引擎的性能优化模式，更快的构建和运行时性能	experimental.vapor
部署目标	支持Vercel、Netlify、Docker、Kubernetes、Node.js服务器等多种部署	nitro preset

Vue 3 性能优化

优化项	说明	实践方法
按需加载	路由懒加载、组件异步加载、动态import减少首包体积	defineAsyncComponent lazy
v-memo 缓存	模板虚拟DOM节点缓存，跳过无需更新的子树的Diff	v-memo
PatchFlag	模板编译优化标记，精确识别动态节点类型	编译优化
Tree Shaking	模块化设计，未使用的API在构建时自动剔除	ES Module
响应式优化	shallowRef避免深层响应式、triggerRef强制更新、toRaw脱离响应式	shallowRef toRaw

特性	说明	示例
React Compiler	自动记忆化优化，无需手动 useMemo/useCallback，编译时自动优化组件性能	babel-plugin-react-compiler
use() 钩子	统一处理 Promise 和 Context，简化异步数据获取和上下文消费	use(promise) use(Context)
Actions 服务器动作	表单提交和服务端动作的声明式处理，支持 pending 状态和乐观更新	useActionState useFormStatus
Document 元数据	组件式元数据管理，直接在组件中声明 title、meta、link 等	<title> <meta>
资产加载	声明式预加载和资源提示，优化关键资源加载优先级	preload preconnect

Svelte 5 Runes 响应式原语

Rune	说明	示例
$state	声明响应式状态，替代 Svelte 4 的 let 变量	let count = $state(0)
$derived	声明派生值，自动追踪依赖并更新	let doubled = $derived(count * 2)
$effect	声明副作用，依赖变化时自动执行	$effect(() => console.log(count))
$props	声明组件属性，替代 export let 语法	let { name } = $props()
$bindable	声明可双向绑定的属性，支持 bind:语法	let { value = $bindable() } = $props()

细粒度响应式对比

框架	响应式模型	更新机制	性能特点
React 19	不可变数据 + 虚拟 DOM	组件级重渲染 + Compiler 优化	自动记忆化，减少不必要渲染
Vue 3.5+	Proxy 响应式系统	细粒度组件更新 + PatchFlag	精确追踪依赖，编译优化
Svelte 5	Runes 响应式原语	编译时细粒度更新	无虚拟 DOM，直接 DOM 操作
SolidJS	Signals 信号系统	细粒度响应式更新	无虚拟 DOM，编译时优化
Qwik	可恢复性架构	零水合 + 惰性加载	序列化状态，按需恢复