Vue vs React 对照手册

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

function increment() {
  count.value++   // 自动触发更新，无需手动
}
</script>

<template>
  <p>计数: {{ count }}</p>
  <p>双倍: {{ double }}</p>
  <button @click="increment">+1</button>
</template>

import { useState, useMemo } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  const double = useMemo(
    () => count * 2, [count]
  )

  function increment() {
    setCount(c => c + 1) // 显式调用 setter
  }

  return (
    <>
      <p>计数: {count}</p>
      <p>双倍: {double}</p>
      <button onClick={increment}>+1</button>
    </>
  )
}

<div v-if="isLoggedIn">欢迎回来</div>
<div v-else>请先登录</div>

<!-- v-show: 切换 display -->
<p v-show="visible">仅切换显示/隐藏</p>

<div>{isLoggedIn ? '欢迎回来' : '请先登录'}</div>

{/* && 短路写法 */}
{isLoggedIn && <div>欢迎回来</div>}

<ul>
  <li v-for="item in list"
      :key="item.id">
    {{ item.name }}
  </li>
</ul>

<ul>
  {list.map(item => (
    <li key={item.id}>
      {item.name}
    </li>
  ))}
</ul>

<!-- v-model 语法糖 -->
<input v-model="text" />
<input v-model.number="age" />

<!-- 等价于 -->
<input
  :value="text"
  @input="text = $event.target.value"
/>

{/* 受控组件，手动绑定 */}
<input
  value={text}
  onChange={e => setText(e.target.value)}
/>

{/* 数字转换 */}
<input
  value={age}
  onChange={e => setAge(Number(e.target.value))}
/>

<button @click="handleClick">点击</button>
<button @click="handleClick(item.id)">
  传参
</button>
<input @keyup.enter="submit" />

<button onClick={handleClick}>点击</button>
<button onClick handleClick(item.id)}>
  传参
</button>
<input onKeyDown e.key === 'Enter' && submit()} />

<img :src="imgUrl" :alt="title" />
<div :class="{ active: isActive, 'text-bold': isBold }">
<div :style="{ color: fontColor, fontSize: size + 'px' }">

<img src={imgUrl} alt={title} />
<div className={`${isActive ? 'active' : ''} ${isBold ? 'text-bold' : ''}`}>
<div style={{ color: fontColor, fontSize: size + 'px' }}>

const fullName = computed(() =>
  firstName.value + ' ' + lastName.value
)

// 模板中直接用 {{ fullName }}
// 自动缓存，依赖不变不重算

const fullName = useMemo(() =>
  firstName + ' ' + lastName
, [firstName, lastName])

// JSX 中直接用 {fullName}
// 需手动声明依赖数组

<!-- 父组件 -->
<Card>
  <template #header>标题</template>
  <template #default>内容</template>
  <template #footer>底部</template>
</Card>

<!-- 子组件 Card.vue -->
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>

{/* 父组件 */}
<Card
  header={<h2>标题</h2>}
  footer={<p>底部</p>}
>
  内容
</Card>

{/* 子组件 Card */}
function Card({ header, footer, children }) {
  return (
    <>{header}{children}{footer}</>
  )
}

watch(count, (newVal, oldVal) => {
  console.log(newVal)
})

// 立即执行
watchEffect(() => {
  fetchData(keyword.value)
})

useEffect(() => {
  console.log(count)
}, [count])

// 每次渲染都执行
useEffect(() => {
  fetchData(keyword)
}) // 无依赖数组

<input ref="inputRef" />

const inputRef = ref(null)
onMounted(() => {
  inputRef.value.focus()
})

const inputRef = useRef(null)

<input ref={inputRef} />

useEffect(() => {
  inputRef.current.focus()
}, [])

<!-- UserCard.vue -->
<script setup lang="ts">
defineProps<{ name: string; age: number }>()
const emit = defineEmits<{
  (e: 'click', id: number): void
}>()
</script>

<template>
  <div @click="emit('click', 1)">
    {{ name }} / {{ age }}
  </div>
</template>

// UserCard.tsx
interface Props {
  name: string; age: number
  onClick: (id: number) => void
}

function UserCard({ name, age, onClick }: Props) {
  return (
    <div onClick onClick(1)}>
      {name} / {age}
    </div>
  )
}

export default UserCard

import {
  onMounted,
  onUpdated,
  onUnmounted
} from 'vue'

onMounted(() => {
  console.log('组件已挂载')
  // 获取 DOM、发请求、绑定事件
})

onUpdated(() => {
  console.log('组件已更新')
})

onUnmounted(() => {
  console.log('组件已卸载')
  // 清理定时器、取消订阅
})

import { useEffect } from 'react'

// ≈ onMounted + onUnmounted
useEffect(() => {
  console.log('组件已挂载')

  return () => {
    console.log('组件将卸载')
    // 清理定时器、取消订阅
  }
}, []) // 空依赖 = 仅挂载/卸载

// ≈ onUpdated
useEffect(() => {
  console.log('依赖变化，已更新')
}, [dep1, dep2]) // 依赖变化时执行