从 Vue 3 迁移到 React：全面对比与学习指南

蚘雨溪
298 阅读6分钟

一、核心概念对比与迁移策略

1. 组件系统

Vue 3:

<!-- Single File Component -->
<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue!')
</script>

React:

// Functional Component with Hooks
import { useState } from 'react'

function MyComponent() {
  const [message, setMessage] = useState('Hello React!')
  
  return <div>{message}</div>
}

迁移要点:

  • Vue 的 <script setup> 对应 React 的函数组件 + Hooks
  • Vue 的 ref 对应 React 的 useState 的第一个返回值
  • Vue 的模板语法更接近 HTML，React 使用 JSX

2. 响应式系统

Vue 3 (ref/reactive):

import { ref, reactive } from 'vue'

const count = ref(0) // 基本类型
const state = reactive({ name: 'Alice' }) // 对象

function increment() {
  count.value++ // 需要 .value
  state.name = 'Bob' // 自动解包
}

React (useState/useReducer):

import { useState, useReducer } from 'react'

// useState 版本
function Counter() {
  const [count, setCount] = useState(0)
  
  function increment() {
    setCount(c => c + 1) // 函数式更新
  }
}

// useReducer 版本 (类似 Vuex/Pinia)
function UserReducer() {
  const [state, dispatch] = useReducer(
    (state, action) => {
      switch(action.type) {
        case 'UPDATE_NAME':
          return { ...state, name: action.payload }
        default:
          return state
      }
    },
    { name: 'Alice' }
  )
  
  return <div>{state.name}</div>
}

关键差异:

  • Vue 自动追踪依赖，React 需要显式调用 setter
  • Vue 的 ref 需要 .value 访问，React 的 state 直接访问
  • React 的 useReducer 更适合复杂状态逻辑

二、生命周期对比

1. 组件挂载/更新/卸载

Vue 3 生命周期:

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

export default {
  setup() {
    onMounted(() => console.log('Mounted'))
    onUpdated(() => console.log('Updated'))
    onUnmounted(() => console.log('Unmounted'))
  }
}

React 生命周期 (Hooks):

import { useEffect } from 'react'

function MyComponent() {
  // 相当于 onMounted
  useEffect(() => {
    console.log('Mounted')
    
    // 相当于 onUnmounted
    return () => console.log('Unmounted')
  }, []) // 空依赖数组表示只在挂载时执行
  
  // 相当于 onUpdated (无直接对应，需特殊处理)
  useEffect(() => {
    console.log('Any update')
  })
}

高级用法 - 仅在特定属性变化时执行:

// Vue
onUpdated(() => {
  if (prevCount.value !== count.value) {
    console.log('Count changed')
  }
})

// React
useEffect(() => {
  console.log('Count changed')
}, [count]) // 仅在 count 变化时执行

三、状态管理对比

1. 组件内状态

Vue (ref/reactive):

import { ref } from 'vue'

export default {
  setup() {
    const form = reactive({
      username: '',
      password: ''
    })
    
    function handleSubmit() {
      console.log(form.username, form.password)
    }
    
    return { form, handleSubmit }
  }
}

React (useState):

import { useState } from 'react'

function LoginForm() {
  const [form, setForm] = useState({
    username: '',
    password: ''
  })
  
  function handleChange(e) {
    const { name, value } = e.target
    setForm(prev => ({ ...prev, [name]: value }))
  }
  
  function handleSubmit(e) {
    e.preventDefault()
    console.log(form.username, form.password)
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        name="username" 
        value={form.username} 
        onChange={handleChange} 
      />
      <input 
        name="password" 
        type="password" 
        value={form.password} 
        onChange={handleChange} 
      />
      <button type="submit">Submit</button>
    </form>
  )
}

2. 全局状态管理

Vue (Pinia):

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// 组件中使用
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()
    return { counter }
  }
}

React (Context + useReducer):

// CounterContext.js
import { createContext, useContext, useReducer } from 'react'

const CounterContext = createContext()

const initialState = { count: 0 }

function reducer(state, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 }
    default:
      return state
  }
}

export function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState)
  
  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  )
}

export function useCounter() {
  return useContext(CounterContext)
}

// 组件中使用
function MyComponent() {
  const { state, dispatch } = useCounter()
  
  return (
    <div>
      {state.count}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Increment
      </button>
    </div>
  )
}

四、模板/JSX 对比

1. 条件渲染

Vue:

<template>
  <div v-if="show">Visible</div>
  <div v-else>Hidden</div>
  
  <!-- 或使用 template 标签 -->
  <template v-if="loggedIn">
    <Welcome />
  </template>
</template>

React:

function MyComponent({ show, loggedIn }) {
  return (
    <>
      {show ? <div>Visible</div> : <div>Hidden</div>}
      
      {loggedIn && <Welcome />}
      
      {/* 或使用立即执行函数 */}
      {(() => {
        if (loggedIn) return <Welcome />
        return null
      })()}
    </>
  )
}

2. 列表渲染

Vue:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }} - {{ item.name }}
    </li>
  </ul>
</template>

React:

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {items.indexOf(item)} - {item.name}
        </li>
      ))}
    </ul>
  )
}

关键点:

  • Vue 的 v-for 更接近原生循环语法
  • React 必须显式使用 map 并提供 key 属性
  • Vue 的 index 是第二个参数，React 需要手动计算

五、事件处理对比

1. 基本事件

Vue:

<template>
  <button @click="handleClick">Click me</button>
  <input @input="handleInput" />
</template>

<script setup>
function handleClick() {
  console.log('Clicked!')
}

function handleInput(e) {
  console.log(e.target.value)
}
</script>

React:

function MyComponent() {
  function handleClick() {
    console.log('Clicked!')
  }
  
  function handleInput(e) {
    console.log(e.target.value)
  }
  
  return (
    <>
      <button onClick={handleClick}>Click me</button>
      <input onInput={handleInput} />
    </>
  )
}

2. 事件修饰符

Vue:

<template>
  <!-- 阻止默认行为 -->
  <form @submit.prevent="onSubmit">
    
    <!-- 停止事件冒泡 -->
    <div @click.stop="doThis"></div>
    
    <!-- 按键修饰符 -->
    <input @keyup.enter="onEnter" />
  </form>
</template>

React:

function MyForm() {
  function handleSubmit(e) {
    e.preventDefault() // 相当于 .prevent
    // 提交逻辑
  }
  
  function handleClick(e) {
    e.stopPropagation() // 相当于 .stop
    // 点击逻辑
  }
  
  function handleKeyUp(e) {
    if (e.key === 'Enter') { // 相当于 .enter
      // 回车逻辑
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <div onClick={handleClick}>Click me</div>
      <input onKeyUp={handleKeyUp} />
    </form>
  )
}

六、计算属性与 Memoization

1. Vue 计算属性

<template>
  <div>{{ fullName }}</div>
</template>

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

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

2. React 使用 useMemo

import { useState, useMemo } from 'react'

function UserProfile() {
  const [firstName, setFirstName] = useState('John')
  const [lastName, setLastName] = useState('Doe')
  
  const fullName = useMemo(() => {
    return `${firstName} ${lastName}`
  }, [firstName, lastName]) // 依赖项变化时重新计算
  
  return <div>{fullName}</div>
}

关键区别:

  • Vue 的 computed 会自动追踪依赖
  • React 的 useMemo 需要显式声明依赖数组
  • Vue 的计算属性有 getter/setter 版本，React 需要额外处理

七、侦听器对比

1. Vue watch

import { ref, watch } from 'vue'

const count = ref(0)

// 基本监听
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`)
})

// 监听多个源
const x = ref(0)
const y = ref(0)

watch([x, y], ([newX, newY], [oldX, oldY]) => {
  console.log(`x: ${oldX} -> ${newX}, y: ${oldY} -> ${newY}`)
})

// 立即执行
watch(count, (newValue) => {
  console.log('Current value:', newValue)
}, { immediate: true })

2. React useEffect

import { useState, useEffect } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  const [x, setX] = useState(0)
  const [y, setY] = useState(0)
  
  // 基本监听
  useEffect(() => {
    console.log(`Count changed to ${count}`)
  }, [count]) // 相当于 Vue 的 watch(count, ...)
  
  // 监听多个状态
  useEffect(() => {
    console.log(`x: ${x}, y: ${y}`)
  }, [x, y]) // 相当于 Vue 的 watch([x, y], ...)
  
  // 立即执行
  useEffect(() => {
    console.log('Component mounted or dependencies changed', count)
  }, [count]) // 初始也会执行一次
  
  // 如果需要只在初始执行一次
  useEffect(() => {
    console.log('Component mounted')
  }, []) // 空依赖数组
}

八、自定义指令 vs Hooks

1. Vue 自定义指令

// main.js
const app = createApp({})

// 注册全局指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

// 组件中使用
<input v-focus />

2. React 自定义 Hook

import { useEffect, useRef } from 'react'

function useFocus() {
  const htmlElRef = useRef(null)
  
  useEffect(() => {
    htmlElRef.current?.focus()
  }, [])
  
  return htmlElRef
}

function MyComponent() {
  const inputRef = useFocus()
  
  return <input ref={inputRef} />
}

九、插槽 vs Props.children

1. Vue 插槽

<!-- Parent.vue -->
<template>
  <Child>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    
    Default slot content
    
    <template v-slot:footer>
      <p>Footer Content</p>
    </template>
  </Child>
</template>

<!-- Child.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

2. React Props.children

// Child.js
function Child({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  )
}

// Parent.js
function Parent() {
  return (
    <Child 
      header={<h1>Header Content</h1>}
      footer={<p>Footer Content</p>}
    >
      Default children content
    </Child>
  )
}

更 React 风格的插槽实现:

// SlotComponent.js
function SlotComponent({ children, ...slots }) {
  return (
    <div>
      {slots.header && <header>{slots.header}</header>}
      <main>{children}</main>
      {slots.footer && <footer>{slots.footer}</footer>}
    </div>
  )
}

// 使用
function App() {
  return (
    <SlotComponent
      header={<h1>Title</h1>}
      footer={<p>Copyright 2023</p>}
    >
      <p>Main content here</p>
    </SlotComponent>
  )
}

十、性能优化对比

1. Vue 优化技巧

<template>
  <!-- v-once 标记只渲染一次 -->
  <div v-once>{{ staticContent }}</div>
  
  <!-- key 属性优化列表渲染 -->
  <div v-for="item in items" :key="item.id">
    {{ item.text }}
  </div>
  
  <!-- 避免不必要的响应式 -->
  <script setup>
  import { shallowRef } from 'vue'
  
  // 对于大型对象使用 shallowRef
  const largeObject = shallowRef({ /* 大型对象 */ })
  </script>
</template>

2. React 优化技巧

function OptimizedComponent({ items }) {
  // 使用 React.memo 避免不必要的重新渲染
  const MemoizedChild = React.memo(function Child({ item }) {
    return <div>{item.text}</div>
  })
  
  // 使用 useCallback 缓存函数
  const memoizedCallback = useCallback(() => {
    console.log('Callback executed')
  }, []) // 依赖项为空表示不会变化
  
  // 使用 useMemo 缓存计算结果
  const filteredItems = useMemo(() => {
    return items.filter(item => item.active)
  }, [items]) // 仅在 items 变化时重新计算
  
  return (
    <>
      {filteredItems.map(item => (
        <MemoizedChild key={item.id} item={item} />
      ))}
      <button onClick={memoizedCallback}>Click me</button>
    </>
  )
}

十一、完整示例对比

1. 计数器组件

Vue 3:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Reset</button>
  </div>
</template>

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

const count = ref(0)

const increment = () => count.value++
const decrement = () => count.value--
const reset = () => count.value = 0
</script>

React:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  
  const increment = () => setCount(c => c + 1)
  const decrement = () => setCount(c => c - 1)
  const reset = () => setCount(0)
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

2. 表单处理

Vue 3:

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>Username:</label>
      <input v-model="form.username" />
    </div>
    <div>
      <label>Password:</label>
      <input v-model="form.password" type="password" />
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue'

const form = reactive({
  username: '',
  password: ''
})

function handleSubmit() {
  console.log('Form submitted:', form)
}
</script>

React:

import { useState } from 'react'

function LoginForm() {
  const [form, setForm] = useState({
    username: '',
    password: ''
  })
  
  function handleChange(e) {
    const { name, value } = e.target
    setForm(prev => ({ ...prev, [name]: value }))
  }
  
  function handleSubmit(e) {
    e.preventDefault()
    console.log('Form submitted:', form)
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input 
          name="username" 
          value={form.username} 
          onChange={handleChange} 
        />
      </div>
      <div>
        <label>Password:</label>
        <input 
          name="password" 
          type="password" 
          value={form.password} 
          onChange={handleChange} 
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

十二、迁移建议与学习路径

  1. 逐步迁移：先从简单组件开始，逐步熟悉 React 的模式
  2. 掌握 Hooks：这是 React 现代开发的核心，类似 Vue 的 Composition API
  3. 理解 JSX：学习如何将模板逻辑转换为 JSX
  4. 状态管理选择：
    • 小应用：useState + useContext
    • 中等应用：useReducer + Context
    • 大型应用：Redux 或 Zustand
  5. 样式方案：
    • CSS Modules
    • Styled-components
    • Emotion
    • Tailwind CSS

十三、常见问题解答

Q: React 中没有 Vue 的 v-model，如何实现双向绑定？

A: React 本身不提供双向绑定语法，需要手动实现：

function TwoWayBinding() {
  const [value, setValue] = useState('')
  
  return (
    <input 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
    />
  )
}

// 或者创建自定义 Hook
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue)
  
  const onChange = (e) => {
    setValue(e.target.value)
  }
  
  return { value, onChange }
}

function BetterTwoWayBinding() {
  const { value, onChange } = useInput('')
  
  return <input value={value} onChange={onChange} />
}

Q: React 中如何实现 Vue 的 $emit 功能？

A: 通过 props 传递回调函数：

// Parent.js
function Parent() {
  function handleChildEvent(data) {
    console.log('Received from child:', data)
  }
  
  return <Child onCustomEvent={handleChildEvent} />
}

// Child.js
function Child({ onCustomEvent }) {
  function triggerEvent() {
    onCustomEvent('Hello from child!')
  }
  
  return <button onClick={triggerEvent}>Trigger Event</button>
}

Q: React 中如何实现 Vue 的 $refs？

A: 使用 useRef Hook：

import { useRef, useEffect } from 'react'

function FocusInput() {
  const inputRef = useRef(null)
  
  useEffect(() => {
    inputRef.current.focus()
  }, [])
  
  return <input ref={inputRef} />
}

Vue 3 vs React 详细对比表

对比维度Vue 3React代码示例对比性能数据参考
核心语法模板语法（HTML-like） + Composition APIJSX（JavaScript XML） + HooksVue 3：
html <template> <div>{{ count }}</div> <button @click="increment">+1</button> </template> <script setup> const count = ref(0); const increment = () => count.value++; </script>
React：
jsx function Counter() { const [count, setCount] = useState(0); return ( <div> {count} <button onClick={() => setCount(count + 1)}>+1</button> </div> ); } 		渲染性能：
- Vue 的响应式系统在简单更新时略快（因依赖追踪更精细）。
- React 的虚拟 DOM 批量更新在复杂场景下更高效（如高频事件）。
测试数据：
Vue 3 的 v-once 指令比 React 的 React.memo 渲染速度提升约 15%（来源：Vue 官方性能测试）。
状态管理内置 reactive/ref + Pinia（推荐）useState/useReducer + Redux/ZustandVue 3 + Pinia：
js import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++; } } }); // 组件中使用 const counter = useCounterStore(); counter.increment();
React + Redux：
js // Store const counterReducer = (state = { count: 0 }, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; default: return state; } }; // 组件中使用 dispatch({ type: 'INCREMENT' }); 		状态更新开销：
- Vue 的 reactive 对象更新比 React 的 useState 快约 20%（小规模状态）。
- Redux 的中间件机制会增加约 10% 的开销（来源：React 社区基准测试）。
生命周期setup() + Composition API 生命周期钩子useEffect Hook + 类组件生命周期Vue 3：
js import { onMounted, onUnmounted } from 'vue'; setup() { onMounted(() => console.log('Mounted')); onUnmounted(() => console.log('Unmounted')); }
React：
js useEffect(() => { console.log('Mounted'); return () => console.log('Unmounted'); }, []); 		副作用执行时间：
- Vue 的 onMounted 在 DOM 挂载后立即执行，比 React 的 useEffect 快约 5ms（微任务队列差异）。
- React 的 useEffect 清理函数在下次渲染前执行，避免竞态条件更可靠。
路由Vue Router（动态路由匹配 + 路由守卫）React Router（配置式路由 + 数据加载）Vue Router：
js const routes = [ { path: '/user/:id', component: User, props: (route) => ({ id: route.params.id }) } ]; // 导航守卫 router.beforeEach((to, from) => { if (to.meta.requiresAuth) { /* 检查登录 */ } });
React Router：
jsx <Routes> <Route path="/user/:id" element={<User />} loader={async ({ params }) => fetchUser(params.id)} /> </Routes> 		路由切换性能：
- Vue Router 的懒加载路由比 React Router 快约 10%（代码分割优化差异）。
- React Router 的数据加载（loader）支持并发渲染，避免“水合”阻塞。
性能优化自动依赖追踪 + <script setup> 编译优化React.memo + useMemo/useCallback + 并发渲染Vue 3：
html <template> <div v-for="item in list" :key="item.id">{{ item.name }}</div> </template> <!-- 自动优化列表渲染 -->
React：
jsx const MemoizedList = React.memo(({ list }) => ( list.map(item => <div key={item.id}>{item.name}</div>) ) ); // 需手动优化子组件 		内存占用：
- Vue 的响应式系统内存占用比 React 的虚拟 DOM 低约 30%（大规模数据测试）。
- React 18 的并发渲染可减少约 50% 的掉帧率（复杂动画场景）。
开发工具Vite + Vue DevTools（时间旅行调试）Vite/CRA + React DevTools（Profiler 分析）Vue DevTools：
Vue DevTools转存失败，建议直接上传图片文件
React DevTools：
React DevTools转存失败，建议直接上传图片文件		调试效率：
- Vue DevTools 的响应式数据追踪比 React DevTools 更直观（直接显示依赖关系）。
- React Profiler 可精准定位渲染瓶颈（适合性能调优）。

关键迁移建议

  1. 状态管理重构：

    • Vue 的 reactive → React 的 useState/useReducer（或 Zustand 替代 Redux）。
    • 避免过度使用 useMemo/useCallback（仅在性能敏感场景使用）。

  2. 生命周期转换：

    • Vue 的 onMounted → React 的 useEffect([], [])。
    • Vue 的 watch → React 的 useEffect + 依赖数组。

  3. 性能优化策略：

    • Vue 的 v-once/v-memo → React 的 React.memo。
    • Vue 的异步组件 → React 的 React.lazy + Suspense。

  4. 生态替代方案：

    Vue 生态React 替代方案
    Vue RouterReact Router v6
    PiniaZustand/Jotai
    VeeValidateYup + React Hook Form
avatar
文章
阅读
粉丝