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

通俗易懂的讲一下Vue的双向绑定和React的单向绑定

news 2025/7/19 15:33:41

1.Vue 的双向绑定：

<template><!-- 输入框和数据自动绑定，就像连体婴儿，一个动另一个也动 --><input v-model="message"><p>{{ message }}</p><!-- 完整表单示例 --><form><!-- 所有输入都自动同步到数据，就像写在纸上字自动复制一样 --><input v-model="user.name" placeholder="姓名"><input v-model="user.age" placeholder="年龄"><textarea v-model="user.bio" placeholder="简介"></textarea></form>
</template><script setup>
// 定义响应式数据
const message = ref('')
const user = reactive({name: '',age: '',bio: ''
})// 当输入框值改变时：
// 1. 自动更新 message 的值
// 2. 相关的视图自动更新
// 就像连锁反应一样，不需要手动处理
</script>

2.React 的单向绑定：

function App() {// 定义状态和更新函数const [message, setMessage] = useState('')const [user, setUser] = useState({name: '',age: '',bio: ''})// 处理输入变化const handleNameChange = (e) => {// 需要手动更新数据setUser({...user,name: e.target.value})}return (<div>{/* 输入框的值来自 message */}{/* 当输入时需要手动调用 setMessage 更新 */}{/* 就像传话游戏，需要一个一个传递 */}<input value={message}onChange={e => setMessage(e.target.value)}/>{/* 完整表单示例 */}<form>{/* 每个输入都需要手动处理更新 */}{/* 就像搬家，每件物品都要自己搬 */}<input value={user.name}onChange={handleNameChange}placeholder="姓名"/></form></div>)
}

3.生活中的例子

Vue 的双向绑定就像：

自动门：感应到人就自动开关

恒温空调：自动调节温度

自动档汽车：自动换挡

智能家居：一切自动化

React 的单向绑定就像：

普通门：需要手动开关

普通空调：需要手动调温度

手动档汽车：需要手动换挡

传统家电：需要手动控制

4.更多实际例子：

Vue 示例（购物车）：

<template><!-- 商品列表 --><div v-for="item in cart" :key="item.id"><!-- 数量输入框自动同步到数据 --><input v-model="item.quantity" type="number"><!-- 价格自动计算 --><p>总价：{{ item.price * item.quantity }}</p></div><!-- 总价自动计算 --><p>购物车总价：{{ totalPrice }}</p>
</template><script setup>
// 购物车数据
const cart = reactive([{ id: 1, name: '苹果', price: 5, quantity: 1 },{ id: 2, name: '香蕉', price: 3, quantity: 1 }
])// 计算总价（自动更新）
const totalPrice = computed(() => {return cart.reduce((total, item) => {return total + item.price * item.quantity}, 0)
})
</script>

React 示例（购物车）：

function ShoppingCart() {// 购物车数据const [cart, setCart] = useState([{ id: 1, name: '苹果', price: 5, quantity: 1 },{ id: 2, name: '香蕉', price: 3, quantity: 1 }])// 处理数量变化const handleQuantityChange = (id, quantity) => {// 需要手动更新整个购物车数据setCart(cart.map(item => {if (item.id === id) {return { ...item, quantity }}return item}))}// 计算总价const totalPrice = cart.reduce((total, item) => {return total + item.price * item.quantity}, 0)return (<div>{/* 商品列表 */}{cart.map(item => (<div key={item.id}>{/* 需要手动处理数量变化 */}<input type="number"value={item.quantity}onChange={e => handleQuantityChange(item.id, Number(e.target.value))}/><p>总价：{item.price * item.quantity}</p></div>))}<p>购物车总价：{totalPrice}</p></div>)
}

总结：

Vue 的特点：