1.在模板中，使用 ref 指令将元素标记为需要引用的元素：

<template> 
    <div ref="myElement">This is a div element</div> 
</template>

2.在 setup 函数中使用 ref 来创建一个空的 ref 对象： 

import { ref, onMounted } from 'vue';

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

    onMounted(() => {
      // 在组件挂载后，myElement.value 将会指向上面的 div 元素
      console.log(myElement.value);
    });

    return {
      myElement
    };
  }
}

3.组件渲染后

Vue 3 会将对应的 <div> 元素赋值给 myElement.value，从而可以访问和操作这个 DOM 元素

4.ref() 执行的时候dom元素还未渲染 如何绑定的

当使用 ref 创建一个引用对象时，确实在执行 ref() 的时候并没有拿到 DOM 元素。ref() 返回的是一个响应式对象，其中包含一个 .value 属性，初始时这个 .value 属性是 undefined。

然而，在 Vue 组件渲染后，Vue 会自动将对应的 DOM 元素赋值给 ref 创建的引用对象的 .value 属性。这个过程是由 Vue 在组件的生命周期中完成的，在组件渲染后，Vue 会查找模板中使用 ref 指令标记的元素，并将它们的引用分配给相应的 ref 对象的 .value 属性。

这个自动绑定的过程使得在组件中可以直接通过 ref 对象的 .value 属性来访问到对应的 DOM 元素，从而方便地操作和管理 DOM。这种机制允许在组件中使用响应式数据和引用 DOM 元素，从而更方便地编写和维护 Vue 组件。