打工人的一天，不是在写代码，就是在改 bug 的路上！尤其是和 DOM 打交道的时候，明明想获取一个元素，结果选中了 “隔壁老王”；想要修改样式，页面却毫无反应，满心的苦恼无处诉说。别担心！今晚就为你送上一剂良方 —— 一个超实用的 Vue2 和 Vue3 模板引用技巧，让你精准操控 DOM，告别手忙脚乱，明天写代码直接 “开挂”！先考考你，有没有遇到过在 Vue 里想获取某个 DOM 元素，用原生方法却导致数据更新混乱的情况？别着急，答案马上揭晓！

巧用模板引用：DOM 元素的 “专属钥匙”

在 Vue 项目开发中，虽然倡导数据驱动视图，尽量避免直接操作 DOM，但总有一些场景需要和 DOM 元素 “亲密接触”，比如手动聚焦输入框、获取元素尺寸等。而模板引用（template refs），就像是一把 “专属钥匙”，能让我们轻松获取到对应的 DOM 元素或子组件实例，实现精准操控。

在 Vue2 中，我们通过在元素或组件上添加ref属性，然后在实例中通过$refs来访问：

<template>
<div>
<!-- 给输入框添加ref属性 -->
<input type="text" ref="myInput" placeholder="请输入内容">
<button @click="focusInput">聚焦输入框</button>
</div>
</template>
<script>
export default {
methods: {
focusInput() {
// 通过$refs获取输入框DOM元素，并调用focus方法
this.$refs.myInput.focus();
}
}
};
</script>

在上面的代码里，给<input>元素添加了ref="myInput"，在focusInput方法中，就能通过this.$refs.myInput获取到该输入框的 DOM 元素，进而调用focus方法实现聚焦操作。

如果是对组件添加ref，则可以获取到子组件的实例：

<template>
<div>
<!-- 给子组件添加ref属性 -->
<ChildComponent ref="myChild"></ChildComponent>
<button @click="callChildMethod">调用子组件方法</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
// 通过$refs获取子组件实例，并调用子组件的方法
this.$refs.myChild.childMethod();
}
}
};
</script>

在 Vue3 中，模板引用的使用方式结合组合式 API 变得更加灵活。我们可以使用ref函数来创建引用，并通过onMounted钩子函数确保在组件挂载后获取 DOM 元素：

<template>
<div>
<input type="text" ref="inputRef" placeholder="请输入内容">
<button @click="focusInput">聚焦输入框</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 创建一个ref引用
const inputRef = ref(null);
const focusInput = () => {
// 确保inputRef存在时调用focus方法
if (inputRef.value) {
inputRef.value.focus();
}
};
onMounted(() => {
console.log('组件已挂载，inputRef:', inputRef.value);
});
</script>

对于组件引用，同样可以使用ref来获取子组件实例：

<template>
<div>
<ChildComponent ref="childRef"></ChildComponent>
<button @click="callChildMethod">调用子组件方法</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
// 创建子组件的ref引用
const childRef = ref(null);
const callChildMethod = () => {
// 确保childRef存在时调用子组件方法
if (childRef.value) {
childRef.value.childMethod();
}
};
</script>

此外，模板引用还可以配合v-for循环使用，获取多个元素或组件的引用。比如，我们想获取列表中每个元素的尺寸：

<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" ref="listItems">
{{ item }}
</li>
</ul>
<button @click="getItemSizes">获取元素尺寸</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const list = ['苹果', '香蕉', '橙子'];
const listItems = ref([]);
const getItemSizes = () => {
listItems.value.forEach((item) => {
console.log('元素尺寸:', item.getBoundingClientRect());
});
};
onMounted(() => {
// 将v-for循环中的元素引用收集到listItems中
listItems.value = Array.from(document.querySelectorAll('[ref="listItems"]'));
});
</script>

问题解答

前面提到的 “在 Vue 里想获取某个 DOM 元素，用原生方法却导致数据更新混乱”，通过模板引用就能有效避免。模板引用是 Vue 提供的官方方式，它与 Vue 的数据响应式系统更好地融合，获取和操作 DOM 元素时不会破坏数据驱动视图的原则，既能满足操作 DOM 的需求，又能保证数据更新的正常运行。

在 Vue 项目中，你觉得直接操作 DOM 是 “大忌” 还是 “必要手段”？

有人认为，Vue 强调数据驱动视图，直接操作 DOM 违背了框架设计理念，容易导致数据和视图不同步，增加维护成本；也有人觉得，在一些特殊场景下，比如实现复杂动画、操作第三方插件时，直接操作 DOM 是不可避免的 “必要手段”，只要合理使用，也能提升开发效率。在实际项目中，你持什么观点呢？快来评论区分享你的经验和看法，一起讨论！

今天的分享就到这里啦！希望这个模板引用技巧，能像黑暗中的一盏明灯，照亮你操控 DOM 的路，驱散一天的苦恼～带着新技能，好好享受夜晚的惬意时光吧！觉得有用的话，别忘了点赞、关注，每天晚上都有这样实用又解压的干货分享，咱们明天见！