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 一样