最近在看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 也变成一个字符串，这样就统一了
图片
