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

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

article 2025/1/7 4:07:24

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 的特点：