网站策划要遵循的原则_宣传册设计样本_百度大数据_直通车推广怎么收费

一、设计哲学差异

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