Vue 3 中的 ref:标签和组件的区别

🚀 Vue 3 中的ref ：标签和组件的区别，一篇搞懂！ 🚀

在 Vue 3 中，ref 是一个非常重要的 API，用于创建响应式数据或获取 DOM 元素/组件实例。但你知道在 标签 和 组件 上使用 ref 有什么区别吗？今天我们就来彻底搞懂这个问题！👇

---

1. ref的基本用法

ref 是 Vue 3 提供的一个函数，用于创建一个 响应式引用 或获取 DOM 元素/组件实例。

1.1 创建响应式数据

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式引用
console.log(count.value); // 访问值
count.value++; // 修改值

1.2 获取 DOM 元素

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myElement = ref(null); // 创建一个 ref

    onMounted(() => {
      console.log(myElement.value); // 获取 DOM 元素
    });

    return {
      myElement,
    };
  },
};

<template>
  <div ref="myElement">这是一个 DOM 元素</div>
</template>

---

2. 标签上的ref

在 HTML 标签 上使用 ref，可以获取对应的 DOM 元素。

2.1 示例

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myElement = ref(null); // 创建一个 ref

    onMounted(() => {
      console.log(myElement.value); // 获取 DOM 元素
    });

    return {
      myElement,
    };
  },
};

<template>
  <div ref="myElement">这是一个 DOM 元素</div>
</template>

2.2 注意事项

• ref 的值在组件挂载后（onMounted）才能访问。
• 如果 ref 绑定在 v-for 循环中，ref 的值将是一个数组。

---

3. 组件上的ref

在 Vue 组件 上使用 ref，可以获取对应的 组件实例。

3.1 示例

import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const myComponent = ref(null); // 创建一个 ref

    onMounted(() => {
      console.log(myComponent.value); // 获取组件实例
    });

    return {
      myComponent,
    };
  },
};

<template>
  <ChildComponent ref="myComponent" />
</template>

3.2 注意事项

• ref 的值在组件挂载后（onMounted）才能访问。
• 可以访问组件实例的属性和方法。

---

4. ref 在标签和组件上的区别

特性	标签上的ref	组件上的ref
获取对象	DOM 元素	组件实例
使用场景	操作 DOM 元素	调用组件方法或访问组件属性
访问时机	组件挂载后（onMounted）	组件挂载后（onMounted）

---

5. 总结

• 标签上的ref：用于获取 DOM 元素。
• 组件上的ref：用于获取组件实例。
• 共同点：都需要在组件挂载后（onMounted）才能访问。

---

如果你对 ref 的用法还有疑问，欢迎在评论区讨论！💬