前言

useTemplateRef 和 ref 都是用來(lái)創(chuàng)建響應(yīng)式引用（Reactive References）的，但在 Vue 3.5+ 中，useTemplateRef 是一個(gè)專(zhuān)門(mén)為模板引用（Template Refs）設(shè)計(jì)的組合式 API (Composable) 。讓我們?cè)敿?xì)對(duì)比一下它們：

ref

• 核心功能: ref 是 Vue 最基礎(chǔ)的響應(yīng)式系統(tǒng) API 之一。它可以包裝任何值（原始類(lèi)型、對(duì)象、DOM 元素、組件實(shí)例等），使其成為響應(yīng)式的。

• 用途廣泛:

  • 存儲(chǔ)和響應(yīng)式地更新本地組件狀態(tài)（如 count = ref(0)）。
  • 作為模板引用（雖然在 3.5+ 之前常用）。
  • 在任何需要響應(yīng)式引用的地方。

• 在模板引用中的用法 (舊方式) :

  <template>
    <div ref="divRef">Hello World</div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  
  const divRef = ref(null); // 創(chuàng)建一個(gè) ref
  
  onMounted(() => {
    // divRef.value 現(xiàn)在是 DOM 元素
    console.log(divRef.value); // <div>Hello World</div>
    divRef.value.focus(); // 例如，聚焦到元素上
  });
  </script>
  

  • 問(wèn)題: 在 <script setup> 中，divRef 會(huì)暴露給模板，即使你只想在腳本內(nèi)部使用它。這可能會(huì)污染模板的上下文。

useTemplateRef(Vue 3.5+)

• 核心功能: 專(zhuān)門(mén)用于獲取對(duì)模板中元素或組件的引用。它返回一個(gè)getter 函數(shù)，而不是一個(gè) ref 對(duì)象。

• 目的: 解決 ref 作為模板引用時(shí)暴露到模板上下文的問(wèn)題，提供更清晰、更符合直覺(jué)的 API。

• 用途: 僅用于模板引用。

• 返回值: 一個(gè) getter 函數(shù)，調(diào)用它會(huì)返回最新的模板引用值。這個(gè)函數(shù)本身是響應(yīng)式的，但其返回值（即引用的元素或組件實(shí)例）不是。

• 優(yōu)勢(shì):

  • 不污染模板上下文: useTemplateRef 返回的 getter 不會(huì)被自動(dòng)暴露到模板中，保持了模板上下文的整潔。
  • 意圖明確: 使用 useTemplateRef 明確表示你正在創(chuàng)建一個(gè)模板引用，提高了代碼的可讀性。
  • 類(lèi)型推斷: 在 TypeScript 中，useTemplateRef 能提供更精確的類(lèi)型推斷。

• 在模板引用中的用法 (新方式) :

  <template>
    <div ref="divRef">Hello World</div>
  </template>
  
  <script setup>
  import { useTemplateRef, onMounted } from 'vue';
  
  // useTemplateRef 返回一個(gè) getter 函數(shù)
  const getDivRef = useTemplateRef('divRef');
  
  onMounted(() => {
    // 調(diào)用 getter 函數(shù)獲取 DOM 元素
    console.log(getDivRef()); // <div>Hello World</div>
    getDivRef()?.focus(); // 例如，聚焦到元素上
  });
  </script>
  

  • 注意：在 ref 指令中使用的字符串（如 'divRef'）必須與 useTemplateRef 的參數(shù)完全匹配。
  • getDivRef() 返回的是實(shí)際的 DOM 元素或組件實(shí)例，如果元素未掛載，則可能返回 null 或 undefined。

對(duì)比總結(jié)

結(jié)論

• 對(duì)于模板引用（獲取 DOM 元素或子組件實(shí)例），強(qiáng)烈推薦在 Vue 3.5+ 項(xiàng)目中使用 useTemplateRef。它更清晰、更安全、類(lèi)型更友好。
• 對(duì)于通用的響應(yīng)式狀態(tài)管理（如計(jì)數(shù)器、布爾標(biāo)志等），繼續(xù)使用 ref。
• 在你的項(xiàng)目中，如果已經(jīng)升級(jí)到了 Vue 3.5 或更高版本，并且需要獲取模板引用，請(qǐng)優(yōu)先考慮 useTemplateRef。

到此這篇關(guān)于Vue 3.5中useTemplateRef和ref區(qū)別的文章就介紹到這了,更多相關(guān)Vue 3.5中useTemplateRef和ref區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論