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的正常使用。