当前位置：首页 > article >正文

深度解析——Vue与React的核心差异

article 2025/2/21 3:48:20

一、设计哲学差异

维度	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

查看全文

http://www.kler.cn/a/551549.html