Vue 3 中 ref 和 id 的用法详解：区别、优缺点及使用场景

在 Vue 3 开发中，我们经常需要获取 DOM 元素或组件实例来进行交互。Vue 提供了 ref 和原生 HTML 属性 id 来实现这种操作。虽然 ref 和 id 都能标识并操作元素，但它们的使用方式、优缺点以及适用场景各不相同。本文将详细解析 Vue 3 中 ref 和 id 的用法，帮助您根据需求选择最合适的方案。

---

ref 的用法与特点

ref 是 Vue 3 提供的响应式引用，用来绑定 DOM 元素或子组件实例。它通过 Vue 的响应式系统确保引用的变化自动同步，是在组件中获取和操作元素的推荐方式。

基础用法示例：使用 ref 操作 DOM 元素

在下面的示例中，ref 被用于引用输入框，使其在组件挂载后自动聚焦。

<template>
  <div>
    <input ref="inputElement" placeholder="输入内容" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const inputElement = ref(null);

    onMounted(() => {
      inputElement.value.focus();
    });

    const focusInput = () => {
      inputElement.value.focus();
    };

    return {
      inputElement,
      focusInput,
    };
  },
};
</script>

• 说明：inputElement 是一个通过 ref 函数创建的引用，Vue 会在组件挂载后自动将输入框与 inputElement 关联。onMounted 钩子确保在页面渲染完成后访问到该元素。

使用 ref 访问子组件实例

在 Vue 3 中，ref 不仅限于操作 DOM 元素，还可以引用子组件实例。在父组件中，可以通过 ref 获取子组件并调用其公开方法。

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>子组件内容</p>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello from Child Component!');
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const childRef = ref(null);

    const callChildMethod = () => {
      if (childRef.value) {
        childRef.value.sayHello();
      }
    };

    return {
      childRef,
      callChildMethod
    };
  }
};
</script>

• 说明：在父组件 ParentComponent 中，通过 ref 将子组件实例 ChildComponent 引用为 childRef，并在按钮点击时调用 sayHello 方法。这种方式适合需要操作子组件的方法或数据的情况。

---

id 的用法与特点

id 是标准 HTML 属性，为元素提供全局唯一的标识符，适合标识不需要响应式更新的静态元素。与 ref 不同，id 不具备 Vue 的响应式特性，因此无法自动追踪元素的变化。它适用于简单的静态标识场景，例如通过 JavaScript 原生方法 document.getElementById 获取 DOM 元素。

基础用法示例：使用 id 静态标识元素

在以下示例中，id 用于标识一个静态元素，并在按钮点击时修改其样式。

<template>
  <div>
    <div id="staticElement">这是一个静态元素</div>
    <button @click="changeColor">更改元素颜色</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      const element = document.getElementById('staticElement');
      if (element) {
        element.style.color = 'blue';
      }
    }
  }
};
</script>

• 说明：通过 id="staticElement" 标识该元素，使用 document.getElementById 获取元素对象并改变其样式。这种用法不具备响应式绑定，因此适合对 DOM 的简单、全局唯一标识。

---

ref 与 id 的详细对比

特性	ref	id
响应性	响应式，自动追踪绑定的元素变化	非响应式，DOM 变化不会自动同步
使用范围	Vue 组件内部	全局
获取方式	this.$refs 或绑定在 ref 函数上的变量	document.getElementById 或选择器 API
适用对象	DOM 元素、Vue 子组件实例	DOM 元素
推荐场景	需要动态控制的组件或元素	静态、不需要动态控制的元素
生命周期集成	Vue 自动管理，确保 ref 在组件挂载后可访问	无生命周期管理，需手动管理

优缺点对比

特性	优点	缺点
ref	- 响应式，支持 Vue 生命周期管理； - 支持 DOM 元素和 Vue 子组件实例访问	- 仅限于 Vue 组件内部使用
id	- 全局唯一标识，适合第三方库和无需响应式的场景； - 跨组件访问方便	- 非响应式，无法动态追踪变化

---

使用场景总结：ref 与 id 的选择

• 优先使用 ref：如果需要响应式更新、操作 Vue 子组件或频繁动态交互，ref 更加合适。它与 Vue 响应式系统深度集成，可以直接在组件中对 DOM 元素和组件实例进行访问和操作。

• 使用 id 的场景：当需要全局唯一标识符或与第三方库集成（如一些全局配置）时，id 是一个简单且有效的选择。它适合用于标识少量静态、无需频繁更新的元素。
   

总结而言，Vue 3 推荐使用 ref 进行组件内部的 DOM 元素或子组件操作，因为它的响应式特性和生命周期管理更适合现代前端开发的需求。而 id 则适用于静态、不需要动态响应的 DOM 元素，全局唯一标识的特点使其适合少数场景。
特别注意：当使用id的时候容易出现不同组件中id命名相同，在页面使用的时候很容易就获取不到自己想要的那个id对象，只能获取到第一个出现的id。比如A组件定义了一个id='person',B组件也定义了一个'person',在他们的共同父组件C中获取id得到的将会是第一个id对应的dom