VUE refs用法详解 VUE中的$refs怎么用？

🔥 VUE | $refs用法详解 | VUE中的$refs怎么用？

📢 最新动态（2025年8月）
Vue 3.4 最新版本进一步优化了$refs的性能，尤其是在动态组件和SSR（服务端渲染）场景下的稳定性提升！如果你还在手动操作DOM，$refs绝对是你的高效搭档！

🎯 什么是$refs？

在Vue中，$refs是一个特殊的属性，用于直接访问DOM元素或子组件实例，它就像是Vue给你的“快捷通道”，让你跳过数据绑定的繁琐，直接操作元素或组件！

适用场景：

• 获取输入框的值
• 调用子组件的方法
• 手动触发DOM操作（如滚动、聚焦）

💡 基本用法

1️⃣ 在模板中绑定ref

在HTML标签或组件上添加ref属性，Vue会自动将其存入$refs对象中：

<template>
  <input ref="myInput" type="text" />
  <ChildComponent ref="child" />
</template>

2️⃣ 在脚本中访问$refs

通过this.$refs获取对应的引用：

<script>
export default {
  mounted() {
    // 操作DOM元素
    this.$refs.myInput.focus(); // 输入框自动聚焦
    // 调用子组件方法
    this.$refs.child.someMethod();
  }
}
</script>

⚠️ 注意：$refs只在组件渲染完成后生效（如mounted生命周期），在created中访问会是undefined！

🚀 进阶技巧

🔄 动态ref

结合v-for时，ref会变成数组：

<template>
  <div v-for="item in list" :key="item.id" ref="items">
    {{ item.text }}
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.items); // 输出所有div元素的数组
  }
}
</script>

� 函数式ref（Vue 3+）

在组合式API中，可以用函数形式更灵活地处理ref：

<template>
  <input :ref="(el) => { if (el) inputEl = el }" />
</template>
<script setup>
import { ref } from 'vue';
const inputEl = ref(null);
</script>

❌ 常见坑点

1. 异步更新问题：
   修改数据后立即访问$refs可能拿不到最新DOM，用nextTick解决：

   this.someData = newValue;
   this.$nextTick(() => {
     this.$refs.myElement.doSomething();
   });

2. 过度依赖$refs：
   Vue提倡数据驱动，频繁操作DOM可能让代码难以维护！

   

• $refs是Vue的“逃生舱”：在必须操作DOM时用它，但别滥用。
• 生命周期很重要：确保组件已挂载再访问$refs。
• Vue 3推荐函数式ref：组合式API下更灵活。

试试用$refs让代码更高效吧！ 🚀 遇到问题？评论区见~ 👇