Vue的模板引用是為了處理直接訪問DOM底層而做的補充處理，畢竟Vue宣稱是基于組件的，這種補充處理是對Vue框架的補充。在前端基于BOM+DOM+js的組成來看，Vue保留模板引用是留下了一種框架設計的余裕。

模板引用案例如下：

<script setup lang="ts">
import {ref} from "vue"const name=ref("");const dom=ref(null);//模板引用的獲取標簽的屬性、調用標簽的事件function testTemplateRef(){if(null!=dom.value){let input:HTMLElement=dom.value;console.log(input);console.log(dom.value["value"]);console.log(input["id"]);        input.focus();}    }
</script><template>
<form><div><div>姓名:<input v-model.lazy="name" id="name" placeholder="input your name" ref="dom"/></div><div><button type="button" @click="testTemplateRef">測試模板引用</button></div></div>    
</form>
</template><style></style>

? ? 模板引用需要在對應的HTML標簽上添加 “ref”屬性，屬性值在組件中需要有對應，這樣就可以在組件中使用屬性值對模板引用進行操作。由于模板引用在組件中的屬性值初始化時為null，在使用時必須先檢查模板引用是否已經初始化。初始化完成后，可以根據javascript中對象屬性的形式獲取對應標簽的屬性內容，如“obj["id"]”、“obj["value"]”等。當需要對模板引用進行事件操作，如獲取焦點、點擊等，這需要將模板引用的對象轉型為HTMLElement，然后可以調用對應的事件，如focus、click等。

? ?模板引用ref的標簽可以是通過條件渲染、列表渲染生成的。ref對應的屬性值也可以是函數生成的。這些都不影響ref的正常使用。