Vue与React的ref机制对比：响应式与非响应式差异

发布时间：2026/10/29 22:47:00
Vue与React的ref机制对比：响应式与非响应式差异

1. Vue 和 React 的 ref 机制本质差异

在 Vue 和 React 这两个主流前端框架中，ref 都是用于直接访问 DOM 元素或组件实例的重要特性，但它们的实现理念和使用方式存在根本性区别。Vue 的 ref 更像是框架响应式系统的一个扩展功能，而 React 的 ref 则是为了突破其函数式编程模型限制而设计的逃生舱。

Vue3 的 ref 实现基于 Proxy 的响应式系统。当我们使用ref()创建引用时，实际上是在创建一个响应式对象，这个对象通过.value属性来访问实际值。这种设计使得 ref 可以无缝融入 Vue 的响应式更新机制中。

// Vue3 的 ref 使用示例 import { ref } from 'vue' const myRef = ref(null) // 创建 ref console.log(myRef.value) // 通过 .value 访问实际值

相比之下，React 的 ref 实现则更为底层。在函数组件中，useRef创建的 ref 对象只是一个普通的 JavaScript 对象，它的.current属性用于存储可变值。React 不会对 ref 的变化做出任何响应，这是 React 函数式编程模型的直接体现。

// React 的 useRef 使用示例 import { useRef } from 'react' const myRef = useRef(null) // 创建 ref console.log(myRef.current) // 通过 .current 访问实际值

关键区别：Vue 的 ref 是响应式的，改变其值会触发组件更新；React 的 ref 是非响应式的，修改 ref 不会导致组件重新渲染。

2. 模板中使用 ref 的语法对比

2.1 Vue 的模板 ref 绑定

Vue 提供了两种方式来使用 ref：

  1. 选项式 API 中的this.$refs
  2. 组合式 API 中的ref()函数

在模板中，我们通过特殊的ref属性来标记需要引用的元素或组件：

<template> <!-- 绑定到 DOM 元素 --> <div ref="myDiv">Hello Vue</div> <!-- 绑定到组件实例 --> <ChildComponent ref="child" /> </template> <script> export default { mounted() { console.log(this.$refs.myDiv) // 访问 DOM 元素 console.log(this.$refs.child) // 访问组件实例 } } </script>

在组合式 API 中，我们需要显式声明 ref 并返回：

<template> <div ref="myDiv">Hello Vue</div> </template> <script setup> import { ref, onMounted } from 'vue' const myDiv = ref(null) onMounted(() => { console.log(myDiv.value) // 访问 DOM 元素 }) </script>

2.2 React 的 ref 绑定

React 的 ref 绑定方式随着版本演进有所变化：

  1. 字符串 ref（已废弃，不推荐使用）
<div ref="myDiv">Hello React</div>
  1. 回调 ref
<div ref={(el) => { this.myDiv = el }}>Hello React</div>
  1. createRef (类组件)
class MyComponent extends React.Component { constructor(props) { super(props) this.myRef = React.createRef() } render() { return <div ref={this.myRef}>Hello React</div> } }
  1. useRef (函数组件)
function MyComponent() { const myRef = useRef(null) return <div ref={myRef}>Hello React</div> }

实际开发中，函数组件应使用useRef，类组件可使用createRef。回调 ref 虽然灵活但性能较差，字符串 ref 已被官方废弃。

3. ref 的类型系统与 TypeScript 支持

3.1 Vue 的 ref 类型推断

Vue3 与 TypeScript 的集成非常紧密，ref 的类型推断十分智能：

import { ref } from 'vue' // 自动推断为 Ref<number> const count = ref(0) // 显式指定复杂类型 interface User { name: string age: number } const user = ref<User>({ name: 'Alice', age: 25 })

当 ref 用于模板引用时，Vue 能自动推断出正确的 DOM 类型：

const el = ref<HTMLDivElement | null>(null)

3.2 React 的 ref 类型处理

React 的 ref 类型处理需要更多手动干预：

import { useRef } from 'react' // 基础类型 const count = useRef<number>(0) // DOM 引用 const divRef = useRef<HTMLDivElement>(null)

对于组件引用，React 需要明确指定实例类型：

class ChildComponent extends React.Component { doSomething() { /* ... */ } } function ParentComponent() { const childRef = useRef<ChildComponent>(null) return <ChildComponent ref={childRef} /> }

Vue 的类型推断更加自动化，特别是在模板引用方面；React 需要更多手动类型声明，特别是在引用自定义组件时。

4. ref 的高级用法与性能考量

4.1 Vue 的响应式 ref 技巧

  1. 解构 ref 保持响应性：
import { ref, toRefs } from 'vue' const state = ref({ count: 0, name: 'Vue' }) // 错误方式：失去响应性 const { count, name } = state.value // 正确方式：使用 toRefs const { count, name } = toRefs(state.value)
  1. 动态 ref 绑定：
<template> <div v-for="item in list" :ref="setItemRef"> {{ item }} </div> </template> <script setup> import { ref } from 'vue' const list = ref([1, 2, 3]) const itemRefs = ref([]) const setItemRef = el => { if (el) { itemRefs.value.push(el) } } </script>

4.2 React 的 ref 性能优化

  1. 避免在渲染函数中创建 ref：
// 错误做法：每次渲染都创建新函数 <div ref={(el) => { this.myRef = el }} /> // 正确做法：使用 useCallback 或 useRef const setRef = useCallback((el) => { if (el) { // 处理 ref } }, [])
  1. 转发 ref (forwardRef)：
const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="fancy"> {props.children} </button> )) // 父组件可以获取到 button 的 ref const ref = useRef() <FancyButton ref={ref}>Click me!</FancyButton>
  1. 命令式句柄 (useImperativeHandle)：
const FancyInput = forwardRef((props, ref) => { const inputRef = useRef() useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus() } })) return <input ref={inputRef} /> })

5. 常见问题与解决方案

5.1 Vue 的 ref 常见坑

  1. 生命周期问题：
import { ref, onMounted } from 'vue' const el = ref(null) // 错误：setup 阶段 DOM 尚未挂载 console.log(el.value) // null onMounted(() => { // 正确：此时可以访问 DOM console.log(el.value) })
  1. 数组 ref 的注意事项：
<template> <div v-for="item in list" :ref="setItemRef"> {{ item }} </div> </template> <script setup> const itemRefs = ref([]) // 必须检查 el 是否存在，因为 v-for 更新时会先传 null 清理旧 ref const setItemRef = el => { if (el) { itemRefs.value.push(el) } } </script>

5.2 React 的 ref 常见问题

  1. 条件渲染导致 ref 为 null：
function MyComponent() { const ref = useRef(null) return ( <> {condition && <div ref={ref}>Content</div>} <button onClick={() => { // 可能为 null console.log(ref.current) }}>Log Ref</button> </> ) }
  1. 函数组件不能直接接收 ref：
// 错误：函数组件没有实例 const MyFunctionComponent = () => <div>Hello</div> const ref = useRef() <MyFunctionComponent ref={ref} /> // 警告 // 正确：使用 forwardRef const MyFunctionComponent = forwardRef((props, ref) => ( <div ref={ref}>Hello</div> ))
  1. 闭包陷阱：
function Timer() { const countRef = useRef(0) useEffect(() => { const timer = setInterval(() => { countRef.current++ // 可以正常工作 }, 1000) return () => clearInterval(timer) }, []) // 显示的值不会更新，因为 ref 变化不会触发渲染 return <div>{countRef.current}</div> }

6. 实际应用场景对比

6.1 适合使用 Vue ref 的场景

  1. 表单输入聚焦：
<template> <input ref="input" v-model="text" /> <button @click="focusInput">Focus</button> </template> <script setup> import { ref } from 'vue' const input = ref(null) const text = ref('') function focusInput() { input.value.focus() } </script>
  1. 组件方法调用：
<template> <ChildComponent ref="child" /> <button @click="callChildMethod">Call Method</button> </template> <script setup> import { ref } from 'vue' const child = ref(null) function callChildMethod() { child.value.doSomething() } </script>

6.2 适合使用 React ref 的场景

  1. 动画控制：
function AnimatedBox() { const boxRef = useRef() useEffect(() => { const animation = boxRef.current.animate( [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }], { duration: 1000 } ) return () => animation.cancel() }, []) return <div ref={boxRef} style={{ width: 100, height: 100, background: 'red' }} /> }
  1. 第三方库集成：
function ChartComponent() { const chartRef = useRef() const [data, setData] = useState(/* ... */) useEffect(() => { const chart = new ThirdPartyChartLibrary(chartRef.current) chart.render(data) return () => chart.destroy() }, [data]) return <div ref={chartRef} /> }
  1. 测量 DOM 元素：
function MeasureExample() { const divRef = useRef() const [size, setSize] = useState({ width: 0, height: 0 }) useLayoutEffect(() => { if (divRef.current) { setSize({ width: divRef.current.offsetWidth, height: divRef.current.offsetHeight }) } }, []) return ( <div ref={divRef}> Size: {size.width} x {size.height} </div> ) }

7. 设计哲学差异解析

Vue 的 ref 设计体现了其"渐进式框架"的理念：

  1. 与响应式系统深度集成
  2. 提供多种使用方式适应不同开发者偏好
  3. 模板中的使用方式简单直观
  4. 自动处理大多数类型推断

React 的 ref 设计反映了其函数式编程原则：

  1. 显式优于隐式（必须手动访问 .current）
  2. 不可变性优先（ref 变化不会触发渲染）
  3. 组合优于继承（forwardRef 机制）
  4. 明确区分可变与不可变状态

这种根本差异导致了两者在 ref 使用体验上的显著不同。Vue 开发者可以更自然地使用 ref，而 React 开发者需要更明确地处理副作用和可变状态。