Hello，大家好，我是 Sunday。

2024年9月3日，Vue 3.5 的正式版終于來了。

前幾天咱們分享了 Vue 3.5 新特性 其中 useTemplateRef 這個 API 被很多同學(xué)所關(guān)注。那么這個 API 在源碼中究竟是怎么實現(xiàn)的呢？今天咱們就來看一下！

useTemplateRef 的作用

useTemplateRef 是用來專門獲取 dom 或者 組件示例 的。

在之前，如果我們想要獲取 dom ，那么需要這么做：

1. 先為 dom 指定 ref 屬性，并且給定一個 value 值
2. 在 js 中，聲明 value 值的變量，并且給定初始值為 空的 ref

<script setup>
// 首先，您定義了一個值為undefined或空的ref
// 并以您想要的方式命名生成的可用內(nèi)容
const divEl = ref();
</script>

<template>
<!-- 然后使用與“ref”屬性的值相同的名稱,在模板中的某個地方 -->
<div ref="divEl" ></div>
</template>

但是，這種方案存在一個問題，那就是：ref 通常用來聲明響應(yīng)式數(shù)據(jù)。當 ref 不光作為響應(yīng)式聲明，還被作為 dom 實例的時候，那么就難免有點讓人疑惑了。

所以在（3.5 之后） Vue 推出了一個新的 API 叫做 useTemplateRef 來解決這個問題：

<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 的實現(xiàn)原理

useTemplateRef 的實現(xiàn)并不復(fù)雜，本質(zhì)上 依然是基于 ref 的實現(xiàn)，只不過是在 ref 上進行了封裝。

訪問 vue-next-3.5.0-master/packages/runtime-core/src/helpers/useTemplateRef.ts 下的代碼，可以看到 useTemplateRef 的實現(xià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"

然后是變量，這里主要涉及到兩個：

第一個 i：通過 getCurrentInstance() 獲取，得到的是 上下文實例。

接下來，通過 i.refs 獲取到所有的 ref 數(shù)據(jù)，然后為 refs 添加 Object.defineProperty 的監(jiān)聽，監(jiān)聽的屬性名就是入?yún)?key。如果以 useTemplateRef('el') 為例，那么就是 "el"。

通過監(jiān)聽對應(yīng) key 的 get 和 set 標記，這里 重點關(guān)注 set 標記，在這里為 r.value 進行了賦值，即：r.value = val。這里的 val 就是 refs[key] 的值，也就是對應(yīng)的 ref 組件實例。

第二個 r：通過 shallowRef(null) 獲取，作為返回值

r 作為 useTemplateRef 的返回值即 最終獲取的組件示例。

查看 shallowRef 方法（vue-next-3.5.0-master/packages/reactivity/src/ref.ts），可以看到該方法最終會生成 ref 示例：

圖片

同時，在上面我們知道了 r.value 的值，是在觸發(fā) refs[key] 的 setter 行為時賦值的，賦值的對象即為 ref 組件實例

因此，當 useTemplateRef 返回 r 時，我們就可以通過 r.value 拿到 ref 組件實例 了

總結(jié)

那么到這里，我們就看完了 useTemplateRef 的大致源碼。整個 useTemplateRef 源碼實現(xiàn)并不復(fù)雜，主要邏輯分為兩步：

1. 通過 Object.defineProperty 監(jiān)聽 ref[key] 的 setter 行為，為 r.value 賦值
2. 通過 shallowRef 生成 ref 實例，并作為 useTemplateRef 的返回值