vue3使用ref获取dom元素渲染ehcatrs

在Vue 3中，你可以使用`ref`组件属性来动态地获取DOM元素。`ref`创建了一个响应式的引用，用于存储值并跟踪其变化。以下是使用`ref`获取DOM元素并进行渲染的基本步骤：

1. 首先，在Vue组件中声明一个`ref`，通常命名为`elRef`，如下：

   <template>
     <div ref="elRef"></div> <!-- 这里的elRef将会指向实际的DOM元素 -->
   </template>

2. 然后，你可以在JavaScript里通过`.value`访问这个DOM元素，如下：

   export default {
     setup() {
       const elRef = ref(null); // 初始化一个ref

       // 当组件挂载完成时，elRef就有了对应的DOM元素
       onMounted(() => {
         console.log(elRef.value); // 打印当前的DOM元素
       });

       // 对于修改DOM的操作，比如添加事件监听或设置样式等
       function handleClick() {
         elRef.value.addEventListener('click', () => {
           // 在这里处理点击事件
         });
       }

       return { elRef, handleClick };
     }
   }