最近在看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 也變成一個字符串，這樣就統一了

圖片