ref 属性概述

在 Vue 框架中，ref 属性是一个关键特性，用于获取对 DOM 元素或子组件实例的直接引用。这一机制在需要直接操作 DOM 元素或调用子组件方法时尤为重要，为开发者提供了更精细的控制能力。

基础应用场景

初始组件结构

vue

<template>

 <div class="person">

   <h1>IT知识一享</h1>

   <h2>学习VUE3</h2>

   <button @click="ShowTitle">修改h2元素</button>

 </div></template>

<script lang="ts" setup></script>

<style scoped>

 .person{

   background-color: rgb(39, 148, 191);

   padding-left: 50px;

 }

 .btn {

   display: flex;

   gap:20px

 }</style>

传统 DOM 操作的局限性

传统 JavaScript 方式通过 getElementById 获取元素存在明显问题：

typescript

function ShowTitle() {

 console.log(document.getElementById('titleH2'))}

当多个组件中存在相同 ID 时，这种方法会导致选择器冲突，无法准确获取目标元素：

vue

<template>

 <h2 id="titleH2">根组件</h2>

 <Person/></template>

<script lang="ts" setup>

 import Person from './components/Person.vue'</script>

Vue ref 解决方案

Vue 的 ref 属性提供了更优雅的解决方案：

vue

<template>

 <div class="person">

   <h1>IT知识一享</h1>

   <h2 ref="titleH2">学习VUE3</h2>

   <button @click="ShowTitle">修改h2元素</button>

 </div></template>

<script lang="ts" setup>import { ref } from 'vue';

let titleH2 = ref()

function ShowTitle() {

 console.log(titleH2.value)}</script>

核心优势：

作用域局部性：每个组件的 ref 引用独立，避免全局命名冲突

类型安全：与 Vue 响应式系统完美集成

样式隔离：使用 scoped 样式时自动添加 data-v 属性标识

组件实例引用

获取子组件实例

在组件标签上使用 ref 属性可以获取该组件的完整实例：

vue

<template>

 <h2 id="titleH2">根组件</h2>

 <Person ref="Per"/>

 <button @click="test">测试</button></template>

<script lang="ts" setup>

 import Person from './components/Person.vue'

 import { ref } from 'vue'

 let Per = ref()

 function test() {

   console.log(Per.value);

 }</script>

组件实例访问控制

Vue 3 引入了访问保护机制，需要通过 defineExpose 显式暴露内部属性：

vue

<script lang="ts" setup>import { ref, defineExpose } from 'vue';

let titleH2 = ref()

function ShowTitle() {

 console.log(titleH2.value)}

// 显式暴露给父组件defineExpose({ titleH2 })</script>

技术要点总结

引用隔离：每个组件的 ref 引用具有独立作用域，避免全局污染

响应式集成：ref 与 Vue 响应式系统深度整合，支持动态更新

访问控制：通过 defineExpose 精确控制组件对外暴露的接口

类型安全：TypeScript 支持提供完整的类型推断和检查

这种设计模式既保证了组件的封装性，又提供了必要的灵活性，是现代 Vue 应用开发中的重要实践。