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

怎么獲取 DOM ？

聊 useTemplateRef 之前，我們先來(lái)探討一個(gè)問(wèn)題，我們?cè)?Vue 的開(kāi)發(fā)中，我們是如何去獲取一個(gè) DOM 元素的？

其實(shí)最最最原始的方式就是使用 JavaScript 的原生 API 去進(jìn)行獲取，比如 document.getElementById，就比如下面這個(gè)例子

圖片

但是，咱們都知道，在 Vue 中不倡導(dǎo)這么去做，于是我們需要使用 ref 去進(jìn)行接收，并且獲取到我們想要獲取到的 DOM 節(jié)點(diǎn)~

就比如下面這個(gè)例子：

圖片

其實(shí)很多人只知道 ref 能傳入一個(gè)響應(yīng)式變量去接收，卻不知道其實(shí)也可以傳入一個(gè) 函數(shù) 去接收，其實(shí)我個(gè)人更加偏愛(ài)傳入 函數(shù) 去接收，為啥呢？我先按下不表，待會(huì)會(huì)說(shuō)到。

先看看 傳入 函數(shù) 是怎么接收的，這個(gè)時(shí)候你得使用 :ref 了。

圖片

很多人會(huì)覺(jué)得說(shuō)，傳入 函數(shù) 去接收也太麻煩了吧？還不如直接用 ref 呢，但是我更加偏愛(ài) 函數(shù)，是因?yàn)檫@樣的方式更具備拓展性。

就比如，你渲染的是一個(gè)列表，你想獲取每一項(xiàng)的 DOM 節(jié)點(diǎn)，這個(gè)時(shí)候明顯 ref 就不夠用了，還得是函數(shù)，請(qǐng)看下面例子。

圖片

當(dāng)然上面只是舉個(gè)小例子，其實(shí)使用 函數(shù) 去接收的話(huà)，還有很多其他的好處，大家慢慢摸索吧！

useTemplateRef

說(shuō)了那么多，再來(lái)說(shuō)說(shuō) useTemplateRef 到底有啥用。

我們先來(lái)看看它的使用方式吧！

圖片

其實(shí)這個(gè) API 的推出，最主要的就是為了 防止代碼視覺(jué)混淆，怎么說(shuō)呢，我們?cè)賮?lái)看看剛剛的方式。

圖片

可以看到上方的 divRef 是一個(gè)字符串，但是下下方的 divRef 確是一個(gè)響應(yīng)式變量，所以容易誤解

所以 useTemplateRef 讓下方的 divRef 也變成一個(gè)字符串，這樣就統(tǒng)一了

圖片