vue3中通过ref如何获取dom元素？

vue3中通过ref如何获取dom元素？

<template>
  //首先要在模板中为我们要获取的元素完成绑定
  <div ref="tree">我是一棵树</div>
</template>

<script setup lang="ts">
import {ref,Ref} from 'vue';
//定义一个空的ref 但是名称要和模板中绑定的ref相同
const tree: Ref<HTMLElement | null>=ref(null)
//最后一步在挂载完成后获取dom元素 也就是onMounted钩子
onMounted(() => {
    //先做一个判断 如果没有获取到就马上返回
    if(!tree.value)return 
    //打印我们获取到的dom
    console.log(tree.value)
})
</script>

在 Vue 3 中，ref 不再是一个对象，而是一个具有 .value 属性的包装器对象，以确保在响应式系统中正确跟踪引用值的更改。因此，在访问 ref 绑定的值时，请始终使用 .value 成员属性。