前言
vue3中想要訪問DOM和子元件可以使用ref進行模版引用，但是這個ref有一些讓人迷惑的地方。比如定義的ref變數到底是一個響應式資料還是DOM元素？還有template中ref屬性的值明明是一個字串，比如ref="inputEl"，怎麼就和script中同名的inputEl變數綁到一塊了呢？所以Vue3.5推出了一個useTemplateRef函式，完美的解決了這些問題。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
ref模版引用的問題
我們先來看一個react中使用ref訪問DOM元素的例子，程式碼如下：
const inputEl = useRef<HTMLInputElement>(null);
<input type="text" ref={inputEl} />
使用useRef函式定義了一個名為inputEl的變數，然後將input元素的ref屬性值設定為inputEl變數，這樣就可以透過inputEl變數訪問到input輸入框了。
inputEl因為是一個.current屬性的物件，由於inputEl變數賦值給了ref屬性，所以他的.current屬性的值被更新為了input DOM元素，這個做法很符合程式設計直覺。
再來看看vue3中的做法，相比之下就很不符合程式設計直覺了。
不知道有多少同學和歐陽一樣，最開始接觸vue3時總是在template中像react一樣給ref屬性繫結一個ref變數，而不是ref變數的名稱。比如下面這樣的程式碼：
<input type="text" :ref="inputEl" />
const inputEl = ref<HTMLInputElement>();
更加要命的是這樣寫還不會報錯！！！！當我們使用inputEl變數去訪問input輸入框時始終拿到的都是undefined。
經過多次排查發現原來ref屬性接收的不是一個ref變數，而是ref變數的名稱。正確的程式碼應該是這樣的：
<input type="text" ref="inputEl" />
const inputEl = ref<HTMLInputElement>();
還有就是如果我們將ref模版引用相關的邏輯抽成hooks後，那麼必須將在vue元件中也要將ref屬性對應的ref變數也定義才可以。
hooks程式碼如下：
export default function useRef() {
const inputEl = ref<HTMLInputElement>();
function setInputValue() {
if (inputEl.value) {
inputEl.value.value = "Hello, world!";
}
}
return {
inputEl,
setInputValue,
};
}
在hooks中定義了一個名為inputRef的變數，並且在setInputValue函式中會透過inputRef變數對input輸入框進行操作。
vue元件程式碼如下：
<template>
<input type="text" ref="inputEl" />
<button @click="setInputValue">給input賦值</button>
</template>
<script setup lang="ts">
import useInput from "./useInput";
const { setInputValue, inputEl } = useInput();
</script>
雖然在vue元件中我們不會使用inputEl變數，但是還是需要從hooks中匯入useInput變數。大家不覺得這很奇怪嗎？匯入了一個變數，又沒有顯式的去使用這個變數。
如果在這裡不去從hooks中匯入inputEl變數，那麼inputEl變數中就不能繫結上input輸入框了。
useTemplateRef函式
為了解決上面說的ref模版引用的問題，在Vue3.5中新增了一個useTemplateRef函式。
useTemplateRef函式的用法很簡單：只接收一個引數key，是一個字串。返回值是一個ref變數。
其中引數key字串的值應該等於template中ref屬性的值。
返回值是一個ref變數，變數的值指向模版引用的DOM元素或者子元件。
我們來看個例子，前面的demo改成useTemplateRef函式後程式碼如下：
<template>
<input type="text" ref="inputRef" />
<button @click="setInputValue">給input賦值</button>
</template>
<script setup lang="ts">
import { useTemplateRef } from "vue";
const inputEl = useTemplateRef<HTMLInputElement>("inputRef");
function setInputValue() {
if (inputEl.value) {
inputEl.value.value = "Hello, world!";
}
}
</script>
在template中ref屬性的值為字串"inputRef"。
在script中使用useTemplateRef函式，傳入的第一個引數也是字串"inputRef"。useTemplateRef函式的返回值就是指向input輸入框的ref變數。
由於inputEl是一個ref變數，所以在click事件中想要訪問到DOM元素input輸入框就需要使用inputEl.value。
我們這裡是要給輸入框中塞一個字串"Hello, world!"，所以使用inputEl.value.value = "Hello, world!"
使用了useTemplateRef函式後和之前比起來就很符合程式設計直覺了。template中ref屬性值是一個字串"inputRef"，使用useTemplateRef函式時也傳入字串"inputRef"就能拿到對應的模版引用了。
hooks中使用useTemplateRef
回到前面講的hooks的例子，使用useTemplateRef後hooks程式碼如下：
export default function useInput(key) {
const inputEl = useTemplateRef<HTMLInputElement>(key);
function setInputValue() {
if (inputEl.value) {
inputEl.value.value = "Hello, world!";
}
}
return {
setInputValue,
};
}
現在我們在hooks中就不需要匯出變數inputEl了，因為這個變數只需要在hooks內部使用。
vue元件程式碼如下：
<template>
<input type="text" ref="inputRef" />
<button @click="setInputValue">給input賦值</button>
</template>
<script setup lang="ts">
import useInput from "./useInput";
const { setInputValue } = useInput("inputRef");
</script>
由於在vue元件中我們不需要使用inputEl變數，所以在這裡就不需要從useInput中引入變數inputEl了。而之前不使用useTemplateRef的方案中我們就不得不引入inputEl變數了。
動態切換ref繫結的變數
有的時候我們需要根據不同的場景去動態切換ref模版引用的變數，這時在template中ref屬性的值就是動態的了，而不是一個寫死的字串。在這種場景中useTemplateRef也是支援的，程式碼如下：
<template>
<input type="text" :ref="refKey" />
<button @click="switchRef">切換ref繫結的變數</button>
<button @click="setInputValue">給input賦值</button>
</template>
<script setup lang="ts">
import { useTemplateRef, ref } from "vue";
const refKey = ref("inputEl1");
const inputEl1 = useTemplateRef<HTMLInputElement>("inputEl1");
const inputEl2 = useTemplateRef<HTMLInputElement>("inputEl2");
function switchRef() {
refKey.value = refKey.value === "inputEl1" ? "inputEl2" : "inputEl1";
}
function setInputValue() {
const curEl = refKey.value === "inputEl1" ? inputEl1 : inputEl2;
if (curEl.value) {
curEl.value.value = "Hello, world!";
}
}
</script>
在這個場景template中ref繫結的就是一個變數refKey，透過點選切換ref繫結的變數按鈕可以切換refKey的值。相應的，繫結input輸入框的變數也會從inputEl1變數切換成inputEl2變數。
useTemplateRef是如何實現的？
我們來看看useTemplateRef的原始碼，其實很簡單，簡化後的程式碼如下：
function useTemplateRef(key) {
const i = getCurrentInstance();
const r = shallowRef(null);
if (i) {
const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs;
Object.defineProperty(refs, key, {
enumerable: true,
get: () => r.value,
set: (val) => (r.value = val),
});
}
return r;
}
首先使用getCurrentInstance方法獲取當前vue例項物件，賦值給變數i。
然後呼叫shallowRef函式生成一個淺層的ref物件，初始值為null。這個ref物件就是useTemplateRef函式返回的ref物件。
接著就是判斷當前vue例項如果存在就讀取例項上面的refs屬性物件，如果例項物件上面沒有refs屬性，那麼就初始化一個空物件到vue例項物件的refs屬性。
vue例項物件上面的這個refs屬性物件用過vue2的同學應該都很熟悉，裡面存的是註冊過ref屬性的所有 DOM 元素和元件例項。
vue3雖然不像vue2一樣將refs屬性物件開放給開發者，但是他的內部依然還是用vue例項上面的refs屬性物件來儲存template中使用ref屬性註冊過的元素和元件例項。
這裡使用了Object.defineProperty方法對refs屬性物件進行攔截，攔截的欄位是變數key的值，而這個key的值就是template中使用ref屬性繫結的值。
以我們上面的demo舉例，在template中的程式碼如下：
<input type="text" ref="inputRef" />
這裡使用ref屬性在vue例項的refs屬性物件上面註冊了一個input輸入框，refs.inputRef的值就是指向DOM元素input輸入框。
然後在script中是這樣使用useTemplateRef的：
const inputEl = useTemplateRef<HTMLInputElement>("inputRef")
呼叫useTemplateRef函式時傳入的是字串"inputRef"，在useTemplateRef函式內部使用Object.defineProperty方法對refs屬性物件進行攔截，攔截的欄位為變數key的值，也就是呼叫useTemplateRef函式傳入的字串"inputRef"。
初始化時，vue處理input輸入框上面的ref="inputRef"就會執行下面這樣的程式碼：
refs[ref] = value
此時的value的值就是指向DOM元素input輸入框，ref的值就是字串"inputRef"。
那麼這行程式碼就是將DOM元素input輸入框賦值給refs物件上面的inputRef屬性上。
由於這裡對refs物件上面的inputRef屬性進行寫操作，所以會走到useTemplateRef函式中Object.defineProperty定義的set攔截。程式碼如下：
const r = shallowRef(null);
Object.defineProperty(refs, key, {
enumerable: true,
get: () => r.value,
set: (val) => (r.value = val),
});
在set攔截中會將DOM元素input輸入框賦值給ref變數r，而這個r就是useTemplateRef函式返回的ref變數。
同樣的當物件refs物件的inputRef屬性進行讀操作時，也會走到這裡的get攔截中，返回useTemplateRef函式中定義的ref變數r的值。
總結
Vue3.5中新增的useTemplateRef函式解決了ref屬性中存在的幾個問題：
-
不符合程式設計直覺，template中ref屬性的值是script中對應的ref變數的變數名。
-
在script中如果不使用ts，則不能直觀的知道一個ref變數到底是響應式資料還是DOM元素？
-
將定義和訪問DOM元素相關的邏輯抽到hooks中後，雖然vue元件中不會使用到存放DOM元素的變數，但是也必須在元件中從hooks中匯入。
接著我們講了useTemplateRef函式的實現。在useTemplateRef函式中會定義一個ref物件，在useTemplateRef函式最後就是return返回這個ref物件。
接著使用Object.defineProperty對vue例項上面的refs屬性物件進行get和set攔截。
初始化時，處理template中的ref屬性，會對vue例項上面的refs屬性物件進行寫操作。
然後就會被set攔截，在set攔截中會將useTemplateRef函式中定義的ref物件的值賦值為繫結的DOM元素或者元件例項。
而useTemplateRef函式就是將這個ref物件進行return返回，所以我們可以透過useTemplateRef函式的返回值拿到template中ref屬性繫結的DOM元素或者元件例項。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
另外歐陽寫了一本開源電子書vue3編譯原理揭秘，看完這本書可以讓你對vue編譯的認知有質的提升。這本書初、中級前端能看懂，完全免費，只求一個star。