在 Vue 3 中，使用 ref 访问DOM元素是一个常见的需求，尤其当你需要操作原生 DOM 元素的时候。对熟悉 Vue 2 的开发者来说，这个概念并不陌生，但 Vue 3 在此基础上进行了改进和加强。本文将详细讲解如何在 Vue 3 中使用 ref 访问 DOM 元素，并通过具体的示例代码来说明其用法。
什么是 ref
在 Vue 3 中，ref 是一个函数，用来创建一个可响应的引用对象。这个对象可以在模板中绑定到 DOM 元素，从而在组件的逻辑代码中方便地访问和操作这些元素。
使用 ref 访问 DOM 元素的步骤
1. 引入 ref 函数
首先，你需要从 vue 包中引入 ref 函数。这个函数可以帮助你创建一个引用对象，用来绑定到 DOM 元素。
import { ref } from 'vue';2. 创建一个 ref 对象
然后，在你的 setup 函数中创建一个 ref 对象。这个对象是一个可响应的引用，初始值通常为 null，因为在模板渲染之前，DOM 元素还不存在。
const myElement = ref(null);3. 绑定 ref 对象到模板中的 DOM 元素
接下来，你需要在模板中使用 ref 特性，把刚才创建的 ref 对象绑定到某个 DOM 元素上。当这个组件实例化并渲染完成后，ref 对象将自动更新，从而引用这个 DOM 元素。
<template> <div ref="myElement"> Hello, Vue! </div></template>4. 访问和操作绑定的 DOM 元素
在 setup 函数或者其他生命周期钩子（如 mounted）中，你可以通过 myElement.value 来访问和操作这个 DOM 元素。
import { onMounted } from 'vue';onMounted(() => { console.log(myElement.value); // 打印 <div>Hello, Vue!</div> myElement.value.style.color = 'red'; // 将文字颜色设置为红色});示例代码
下面是一个完整的示例，通过这个示例你可以清晰地了解在 Vue 3 中如何使用 ref 访问和操作 DOM 元素。
<template> <div> <h1>Vue 3 使用 ref 访问 DOM 元素示例</h1> <div ref="myElement">Hello, Vue!</div> <button @click="changeColor">改变颜色</button> </div></template><script>import { ref, onMounted } from 'vue';export default { name: 'App', setup() { // 创建一个 ref 对象 const myElement = ref(null); // 在 mounted 生命周期钩子中访问 DOM 元素 onMounted(() => { console.log(myElement.value); // 打印 <div>Hello, Vue!</div> }); // 一个将颜色设置为蓝色的函数 const changeColor = () => { if (myElement.value) { myElement.value.style.color = 'blue'; } }; // 返回 ref 和方法以便在模板中使用 return { myElement, changeColor } }}</script><style>/* 一些基本样式 */h1 { font-family: Arial, sans-serif; color: #333;}div { margin-bottom: 10px;}</style>深入探讨
1. 多个 ref 的情况
如果你的组件中需要操作多个 DOM 元素，你可以创建多个 ref，并在模板中分别绑定它们。
<template> <div> <div ref="element1">Element 1</div> <div ref="element2">Element 2</div> </div></template><script>import { ref, onMounted } from 'vue';export default { name: 'MultipleRefExample', setup() { const element1 = ref(null); const element2 = ref(null); onMounted(() => { console.log(element1.value); // 打印 <div>Element 1</div> console.log(element2.value); // 打印 <div>Element 2</div> }); return { element1, element2 } }}</script>2. ref 的响应性
ref 不仅适用于 DOM 元素，还能用来创建响应式的数据。你可以在 ref 中存储任意数据类型，并且当数据变化时，Vue 会自动进行响应式更新。
import { ref } from 'vue';export default { name: 'ReactiveRefExample', setup() { const count = ref(0); const increment = () => { count.value++; }; return { count, increment } }}在上面的例子中，count 是一个响应式的引用，每当调用 increment 函数时，count 的值都会增加，并且任何使用到 count 的模板部分也会自动更新。
总结
在 Vue 3 中，ref 提供了一种简单而强大的方式来访问 DOM 元素和创建响应式数据。通过本文的介绍和示例代码，你应该对如何使用 ref 访问和操作 DOM 元素有了清晰的理解。
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
