Vue 3中ref属性的使用与如何通过ref直接访问DOM元素或组件实例

在Vue 3中，ref 属性是一个非常重要的特性，它允许我们直接访问 DOM 元素或组件实例。这与Vue 2中的 $refs 访问方式类似，但Vue 3的ref是通过ref函数创建的响应式引用，这意呀着它不仅可以用于DOM元素，还可以用于Vue组件实例和复合类型的数据。

如何使用`ref`

引入ref函数：首先，你需要在组件的<script setup>部分或组件的<script>部分（使用Composition API时）从vue包中引入ref函数。

<script setup>  
import { ref } from 'vue';  
  
// 使用ref  
const myRef = ref(null);  
</script>

在模板中使用ref：将ref作为属性绑定到DOM元素或组件上。Vue会自动处理这个属性，并将其值设置为DOM元素或组件实例的引用。

<template>  
  <div ref="myRef">Hello, Vue 3!</div>  
  <!-- 或者在组件上 -->  
  <MyComponent ref="componentRef" />  
</template>

使用`$refs`获取元素

在Vue 3的Composition API中，并没有直接使用this.$refs的方式来访问ref，因为setup()函数没有this上下文。相反，你在setup()函数中通过ref函数创建的响应式引用可以直接在函数内部访问。

但是，如果你是在<script>部分（非<script setup>）使用Options API，或者在某些特定场景下（如需要访问在模板中定义的ref），你可以通过setup()函数的第二个参数context来访问refs，尽管这不是常见的做法。然而，在大多数情况下，你不需要这么做，因为你可以直接在setup()内部或通过模板引用直接访问这些ref。

对于<script setup>和Composition API，你只需直接通过变量名访问你的ref。

<script setup>  
import { ref, onMounted } from 'vue';  
  
const myRef = ref(null);  
  
onMounted(() => {  
  // 直接访问DOM元素  
  console.log(myRef.value); // 输出：<div>Hello, Vue 3!</div>  
});  
</script>

注意

使用ref时，Vue会将绑定到的DOM元素或组件实例赋值给该ref的.value属性。
对于DOM元素，你通常会在组件挂载（onMounted）后访问它，以确保DOM已经渲染。
在<script setup>中，你可以直接通过变量名访问ref，无需通过this.$refs。
如果你使用的是Options API，并且需要访问ref，你可能需要在mounted生命周期钩子中通过this.$refs来访问，但请注意，Vue 3推荐使用Composition API和<script setup>语法。