vue3.5中useTemplateRef获取DOM元素

前言：

        vue3.5推出了一种新的获取DOM元素的API（useTemplateRef），它与vue3.5之前获取DOM元素有什么不同呢？今天我们来学习一下。

1.vue3.5之前如何获取DOM元素

        在vue3.5之前，我们要给需要获取DOM元素上面添加一个ref，然后给这个ref一个名字，在逻辑代码中创建一个变量，变量名需要和DOM元素上ref的名称相同。代码如下：

<template>
  <div class="app" ref="divRef"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 变量名divRef必须跟上面保持一致
const divRef = ref()

onMounted(()=>{
  console.log("DOM元素 ==> ", divRef.value);
})
</script>

         这样我们就成功的获取到了这个DOM元素，这样的缺点显而易见，它的变量名称不能随意更改，灵活性不高。

2.vue3.5使用useTemplateRef获取DOM元素

        因此在vue3.5推出了useTemplateRef API用来获取DOM元素，接下来我来演示一下。代码如下。

<template>
  <div class="app" ref="divRef"></div>
</template>

<script setup>
import { ref, onMounted, useTemplateRef } from "vue";

// vue3.5之前获取DOM元素，变量名divRef必须跟上面保持一致
// const divRef = ref()

// 使用useTemplateRef获取DOM元素
const dwiagdiuwa = useTemplateRef('divRef') // 这边的变量名我是随便打的，就是想告诉大家这个变量名是不固定的，正式项目可不要学我

onMounted(()=>{
  // console.log("DOM元素 ==> ", divRef.value);
  console.log("DOM元素 ==> ", dwiagdiuwa.value);
})
</script>

        这样的写法类似于js中的获取DOM元素的方式（document.querySelector） ，这样的一个设计更符合我们的一个书写习惯，毕竟我们都是从学js一步一步过来的。

结语：

        vue3.5也推出了其他的API，有机会我会一一记录到我的个人博客上，如果这篇博客对你有帮助，不妨点赞加关注😀。