this.$refs —— 只适用于选项式 API

只适用于选项式 API 的情况下

this.$refs 是用于在 Vue 组件中访问子组件或者 DOM 元素的一种方式。通常，在模板中可以使用 ref 属性为子组件或者 DOM 元素指定引用，然后通过 this.$refs 来访问这些引用

在选项式 API（Options API）中，比如在 methods、mounted、created 等生命周期钩子函数中，你可以使用 this.$refs 来获取对模板中的子组件或 DOM 元素的引用，例：

<template>
  <div>
    <child-component ref="myComponent"></child-component>
  </div>
</template>

<script>
export default {
  mounted() {
    // 访问子组件的方法或属性
    this.$refs.myComponent.someMethod();
  }
};
</script>

setup() 函数不直接支持 this 上下文，因此无法使用 this.$refs。在 setup() 中，要想获取对子组件或 DOM 元素的引用，你可以通过 ref 函数来创建引用并将其暴露给模板，例：

<template>
  <div ref="myElement"></div>
</template>

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

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

    onMounted(() => {
      // 使用 myElement.value 来访问 DOM 元素
      myElement.value.classList.add('some-class');
    });

    return {
      myElement
    };
  }
};
</script>

• 可以使用 ref 函数创建引用并暴露它，然后可以在该组件的其他部分使用这个引用
• 可以理解为：setup 函数中先初始化一个空的响应式变量 myElement，然后对其进行操作，然后 return 暴露出去，反应到 template 里的 <div ref="myElement"></div> 中
• setup 语法糖同理，也需要 return（和 setup 函数不同，事件方法就不需要 return 了）

小提一嘴：

• 在模板中，使用 ref 创建的变量需要通过 .value 来访问其实际的值，这是因为 ref() 返回的是一个对象，而实际的值则储存在这个对象的 .value 属性中

• 在模板中使用 ref="myElement" 时，Vue 会自动处理 .value 部分。所以，在模板中，你不需要显式地使用 .value，可以直接使用 myElement 引用来访问 DOM 元素，就像直接访问 myElement.value 一样