快捷導(dǎo)航

Vue 和 React 使用ref的示例詳解

更新時(shí)間：2025年04月07日 09:56:30 作者：lryh_

在 Vue 中,ref 是一個(gè)響應(yīng)式對象,修改 ref 的值會觸發(fā)組件的重新渲染,因?yàn)?nbsp;Vue 的 ref 是基于其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的,任何對 ref 的修改都會被 Vue 檢測到,并觸發(fā)組件的更新,本文給大家介紹Vue 和 React 使用ref的示例,感興趣的朋友一起看看吧

ref 用于訪問 DOM 元素或子組件實(shí)例

Vue2:

<template>
  <div>
    <input ref="inp" />
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.inp.focus()
  }
}
</script>

Vue3 組合式API中使用ref

<template>
  <div>
    <input ref="inp" />
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const inp = ref(null)
    onMounted(() => {
      inp.value.focus()
    })
    return {
      inp
    }
  }
}
</script>

在 Vue 中，ref 是一個(gè)響應(yīng)式對象，修改 ref 的值會觸發(fā)組件的重新渲染。因?yàn)?Vue 的 ref 是基于其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的，任何對 ref 的修改都會被 Vue 檢測到，并觸發(fā)組件的更新。

React 函數(shù)組件通過useRef Hook 來實(shí)現(xiàn)：

useRef 不僅可以用于訪問 DOM 元素，還可以存儲任何可變值

import { useEffect, useRef } from "react"
const Hanshi = () => {
    const inp = useRef(null)
    useEffect(()=>{
        inp.current.focus()
    },[])
    return <>
        <div>
            <h3>函數(shù)組件</h3>
            <input type="text" ref={inp}/>
        </div>
    </>
 }
 export default Hanshi

useRef(null) 創(chuàng)建了一個(gè) ref 對象，并將其初始值設(shè)置為 null

將 inp 綁定到 <input> 的 ref 屬性上，這樣 inp.current 就會指向該 DOM 元素

在 useEffect 中，通過 inp.current 訪問 DOM 元素并調(diào)用 focus() 方法

存儲任何可變值：與 useState 不同，修改 useRef 的值不會觸發(fā)組件的重新渲染

import { useEffect, useRef } from "react"
const Hanshi = () => {
    const inp = useRef()
    const num = useRef(0)
    useEffect(()=>{
        inp.current.focus()
        num.current += 1
        console.log(`組件渲染了 ${num.current} 次`)
    },[])
    return <>
        <div>
            <h3>函數(shù)組件</h3>
            <input type="text" ref={inp}/>
        </div>
    </>
 }
 export default Hanshi

函數(shù)組件中轉(zhuǎn)發(fā) ref(forwardRef）: forwardRef 允許父組件訪問子組件中的 DOM 元素或組件實(shí)例

使用 forwardRef 將 ref 從父組件傳遞到子組件

父組件通過 inpt 訪問子組件中的 <input> 元素

useImperativeHandle 自定義子組件暴露給父組件的 ref 值

useImperativeHandle 允許子組件自定義暴露給父組件的 ref 值

父組件可以通過 inpt.current 調(diào)用子組件暴露的方法（如 focus 和 getValue）

React 類組件 createRef

1. 通過createRef創(chuàng)建一個(gè)ref對象
2. 給元素綁定ref屬性值為創(chuàng)建的ref對象
3. 通過ref對象的current獲取元素，再獲取它的值

import { Component,createRef } from "react";
export default class Detail extends Component{
    inp = createRef()
    getInp(){
     console.log(this.inp.current.value)
    }
    componentDidMount(){
        this.inp.current.focus()
    }
    render() {
        return <div>
            <h3>類組件</h3>
            <input type="text" ref={this.inp}/>
            <button onClick={this.getInp.bind(this)}>獲取值按鈕</button>
        </div>
    }
}

類子組件

父組件通過 ref 訪問子組件的實(shí)例，并調(diào)用子組件的方法（如 focus）

這種方式僅適用于類組件，函數(shù)組件沒有實(shí)例