一、设计哲学差异
| 维度 | Vue 3 | React 18 |
|---|---|---|
| 定位 | 渐进式框架 | UI库+生态体系 |
| 设计目标 | 降低前端开发门槛 | 构建大型复杂应用 |
| 学习曲线 | 2周（官方文档友好） | 3周（生态学习成本高） |
案例对比：开发商品详情页
<!-- Vue模板 -->
<template>
<div class="product">
<h1>{
{ product.name }}</h1>
<img :src="product.image" />
<button @click="addToCart">加入购物车</button>
</div>
</template>
// React组件
function Product({ product }) {
const [cart, setCart] = useState([]);
const addToCart = () => {
setCart([...cart, product]);
};
return (
<div className="product">
<h1>{product.name}</h1>
<img src={product.image} />
<button onClick={addToCart}>加入购物车</button>
</div>
);
}
二、响应式原理对比
Vue响应式系统
// 基于Proxy的响应式
const product = reactive({
name: 'iPhone 15',
price: 6999
});
watchEffect(() => {
console.log(`价格更新：${
product.price}`);
});
product.price = 6499; // 自动触发日志输出
React状态管理
// 基于Hooks的状态更新
const [product, setProduct] = useState({
name: 'iPhone 15',
price: 6999
});
useEffect(() => {
console.log(`价格更新：${
product.price}`);
}, [product.price]);
const updatePrice = () => {
setProduct(prev => ({
...prev, price: 6499}));
};
核心差异：
- Vue自动追踪依赖关系
- React需要显式声明依赖数组
- Vue的响应式粒度到属性级别
- React以组件为单位重渲染
三、模板系统对比
Vue单文件组件
<template>
<!-- 声明式模板 -->
<div v-for="item in cart" :key="item.id">
{
{ item.name }} x{
{ item.quantity }}
<button @click="removeItem(item.id)">删除</button>
</div>
</template>
<script setup>
// 逻辑与模板分离
const cart = ref([]);
const removeItem = (id) => {
cart.value = cart.value.filter(item => item.id !== id);
};
</script>
React JSX
// 命令式渲染
function Cart() {
const [cart, setCart] = useState([]);
const removeItem = (id) => {
setCart(prev => prev.filter(item => item.id !== id));
};
return (
<div>
{cart.map(item => (
<div key={item.id}>
{item.name} x{item.quantity}
<button onClick={() => removeItem(item