来了来了！ Vue 有史以来最鸡肋的 API 它来了！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

最近在看 Vue3.5 推出的新的 API ，叫做 useTemplateRef ，那么它到底是什么呢？到底有什么用呢？

怎么获取 DOM ？

聊 useTemplateRef 之前，我们先来探讨一个问题，我们在 Vue 的开发中，我们是如何去获取一个 DOM 元素的？

其实最最最原始的方式就是使用 JavaScript 的原生 API 去进行获取，比如 document.getElementById ，就比如下面这个例子

但是，咱们都知道，在 Vue 中不倡导这么去做，于是我们需要使用 ref 去进行接收，并且获取到我们想要获取到的 DOM 节点~

就比如下面这个例子

其实很多人只知道 ref 能传入一个响应式变量去接收，却不知道其实也可以传入一个 函数 去接收，其实我个人更加偏爱传入 函数 去接收，为啥呢？我先按下不表，待会会说到

先看看 传入 函数 是怎么接收的，这个时候你得使用 :ref 了

很多人会觉得说，传入 函数 去接收也太麻烦了吧？还不如直接用 ref 呢，但是我更加偏爱 函数 ，是因为这样的方式更具备拓展性

就比如，你渲染的是一个列表，你想获取每一项的 DOM 节点，这个时候明显 ref 就不够用了，还得是函数，请看下面例子

当然上面只是举个小例子，其实使用 函数 去接收的话，还有很多其他的好处，大家慢慢摸索吧~

useTemplateRef

说了那么多，再来说说 useTemplateRef 到底有啥用

我们先来看看它的使用方式吧

其实这个 API 的推出，最主要的就是为了 防止代码视觉混淆 ，怎么说呢，我们再来看看刚刚的方式

可以看到上方的 divRef 是一个字符串，但是下下方的 divRef 确是一个响应式变量，所以容易误解

所以 useTemplateRef 让下方的 divRef 也变成一个字符串，这样就统一了