React vs Vue 互动对比

// 你的 tp-link.com/us 现在就是这样工作的

// 1. HTML 写好结构
<span id="price">$149.99</span>
<span id="qty">1</span>
<span id="total">$149.99</span>

// 2. JS 手动找到元素，手动改
$("#plus-btn").click(function() {
  qty = qty + 1;
  $("#qty").text(qty); // 手动改数量
  $("#total").text(qty * price); // 手动改总价
  if (qty > 10) {
    $("#warning").show(); // 手动显示提示
  }
});

// 你只管改数据，页面自动更新

// 1. 声明数据
const qty = 1
const price = 149.99

// 2. 描述"数据怎么展示"
<span>{qty}</span>
<span>{qty * price}</span>
{qty > 10 && <Warning/>}

// 3. 改数据就行，页面自己更新
setQty(qty + 1) // 就这一行
// → 数量自动变
// → 总价自动算
// → 提示自动出现

function ProductCard({ name, price }) {
  // 声明状态
  const [qty, setQty] = useState(1)

  // 返回界面描述
  return (
    <div>
      <h3>{name}</h3>
      <p>${price}</p>
      <button onClick={() => setQty(qty - 1)}>-</button>
      <span>{qty}</span>
      <button onClick={() => setQty(qty + 1)}>+</button>
    </div>
  )
}

<!-- 结构 -->
<template>
  <div>
    <h3>{{ name }}</h3>
    <p>${{ price }}</p>
    <button @click="qty--">-</button>
    <span>{{ qty }}</span>
    <button @click="qty++">+</button>
  </div>
</template>

<!-- 逻辑 -->
<script setup>
const qty = ref(1)
</script>

// 你必须用 setQty 来改值
setQty(qty + 1) // ✅ React 知道了，会更新界面

qty = qty + 1 // ❌ React 不知道，界面不会变！

// 直接改就行
qty.value++ // ✅ Vue 自动感知，界面自动更新

// Vue 在你定义 ref() 的时候
// 就已经在这个变量上装了"监控探头"