Vue3.5 源碼解析， useTemplateRef 實(shí)現(xiàn)原理
Hello，大家好，我是 Sunday。
2024年9月3日，Vue 3.5 的正式版終于來了。
前幾天咱們分享了 Vue 3.5 新特性 其中 useTemplateRef 這個(gè) API 被很多同學(xué)所關(guān)注。那么這個(gè) API 在源碼中究竟是怎么實(shí)現(xiàn)的呢？今天咱們就來看一下！
useTemplateRef 的作用
useTemplateRef 是用來專門獲取 dom 或者 組件示例 的。
在之前，如果我們想要獲取 dom ，那么需要這么做：
- 先為 dom 指定 ref 屬性，并且給定一個(gè) value 值
- 在 js 中，聲明 value 值的變量，并且給定初始值為 空的 ref
<script setup>
// 首先，您定義了一個(gè)值為undefined或空的ref
// 并以您想要的方式命名生成的可用內(nèi)容
const divEl = ref();
</script>
<template>
<!-- 然后使用與“ref”屬性的值相同的名稱,在模板中的某個(gè)地方 -->
<div ref="divEl" ></div>
</template>但是，這種方案存在一個(gè)問題，那就是：ref 通常用來聲明響應(yīng)式數(shù)據(jù)。當(dāng) ref 不光作為響應(yīng)式聲明，還被作為 dom 實(shí)例的時(shí)候，那么就難免有點(diǎn)讓人疑惑了。
所以在（3.5 之后） Vue 推出了一個(gè)新的 API 叫做 useTemplateRef 來解決這個(gè)問題：
<template>
<div>
<div ref="el">程序員Sunday</div>
</div>
</template>
<script setup>
import { onMounted, useTemplateRef } from 'vue'
const elRef = useTemplateRef('el')
onMounted(() => {
console.log(elRef.value) // dom 示例
})
</script>useTemplateRef 的實(shí)現(xiàn)原理
useTemplateRef 的實(shí)現(xiàn)并不復(fù)雜，本質(zhì)上 依然是基于 ref 的實(shí)現(xiàn)，只不過是在 ref 上進(jìn)行了封裝。
訪問 vue-next-3.5.0-master/packages/runtime-core/src/helpers/useTemplateRef.ts 下的代碼，可以看到 useTemplateRef 的實(shí)現(xiàn)邏輯。
圖片
直接看這個(gè)代碼是有點(diǎn)復(fù)雜的，我們把它簡化一下：
export function useTemplateRef(
key: Keys,
){
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
}剔除掉 “邊緣邏輯” 之后，我們可以得到如上代碼。
首先來看 入?yún)ⅲ簁ey：
key 代表傳入 ref 值，比如在 useTemplateRef('el') 中，代表的就是 "el"
然后是變量，這里主要涉及到兩個(gè)：
第一個(gè) i：通過 getCurrentInstance() 獲取，得到的是 上下文實(shí)例。
接下來，通過 i.refs 獲取到所有的 ref 數(shù)據(jù)，然后為 refs 添加 Object.defineProperty 的監(jiān)聽，監(jiān)聽的屬性名就是入?yún)?key。如果以 useTemplateRef('el') 為例，那么就是 "el"。
通過監(jiān)聽對(duì)應(yīng) key 的 get 和 set 標(biāo)記，這里 重點(diǎn)關(guān)注 set 標(biāo)記，在這里為 r.value 進(jìn)行了賦值，即：r.value = val。這里的 val 就是 refs[key] 的值，也就是對(duì)應(yīng)的 ref 組件實(shí)例。
第二個(gè) r：通過 shallowRef(null) 獲取，作為返回值
r 作為 useTemplateRef 的返回值即 最終獲取的組件示例。
查看 shallowRef 方法（vue-next-3.5.0-master/packages/reactivity/src/ref.ts），可以看到該方法最終會(huì)生成 ref 示例：
圖片
同時(shí)，在上面我們知道了 r.value 的值，是在觸發(fā) refs[key] 的 setter 行為時(shí)賦值的，賦值的對(duì)象即為 ref 組件實(shí)例
因此，當(dāng) useTemplateRef 返回 r 時(shí)，我們就可以通過 r.value 拿到 ref 組件實(shí)例 了
總結(jié)
那么到這里，我們就看完了 useTemplateRef 的大致源碼。整個(gè) useTemplateRef 源碼實(shí)現(xiàn)并不復(fù)雜，主要邏輯分為兩步：
- 通過 Object.defineProperty 監(jiān)聽 ref[key] 的 setter 行為，為 r.value 賦值
- 通過 shallowRef 生成 ref 實(shí)例，并作為 useTemplateRef 的返回值
