【vue3|第11期】Vue3中的ref属性：让元素引用变得简单

日期：2024年6月19日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

文章目录

一、前言
二、如何定义ref？
三、ref 属性有什么作用？
四、什么场景下使用 ref 属性？
五、注意事项
六、总结

在这里插入图片描述

一、前言

在 Vue3 中，ref 是一个特殊的属性，它可以附加到 HTML 元素 或 任何组件 上，用来创建对 DOM 元素 或 组件实例 的引用。这对于需要直接操作 DOM 元素的场景非常有用，例如读取元素的属性、设置元素的样式、调用组件的方法等。

二、如何定义ref？

在 Vue3 中，可以通过 ref() 函数来创建一个 ref 对象。这个数据对象包含一个 value 属性，该属性的值就是被引用的 DOM 元素 或 组件实例。当你需要访问这个 DOM元素 或 组件实例 时，可以通过 value 属性 来获取。

<template>
	<div ref="myDiv">Hello, Vue3!</div>
</template>

<script setup>
	import { ref } from 'vue';
	const myDiv= ref(null);

    // 在组件挂载后，可以通过myDiv.value访问到DOM元素
    onMounted(() => {
      console.log(myElement.value); // 输出： <div>Hello, Vue3!</div>
    });

</script>

三、ref 属性有什么作用？

ref 属性 的主要作用是提供一种便捷的方式来 访问和操作 DOM 元素或组件实例。通过 ref 属性，我们可以直接访问元素的属性和方法，无需通过事件或数据绑定来进行操作。这在某些场景下可以大大简化我们的代码，提高开发效率。如：

改变元素的大小、位置等样式属性
添加或移除事件监听器
调用原生的JavaScript方法

四、什么场景下使用 ref 属性？

ref 属性通常用于以下场景：

访问和操作 DOM 元素：当你需要直接访问和操作 DOM 元素时，可以使用 ref 属性。例如，获取输入框的值、设置元素的样式等。
调用组件方法：当你需要调用子组件的方法时，可以使用 ref 属性。例如，调用子组件的某个功能方法。
访问子组件实例：当你需要访问子组件的实例时，可以使用 ref 属性。例如，获取子组件的数据或监听子组件的事件。

五、注意事项

尽量避免过度使用 ref 属性。在大多数情况下，我们应该优先使用 Vue 的 数据绑定 和 事件系统 来实现功能，只有在必要时才使用 ref 属性。
ref 只有在组件挂载完成后才能获取到对应的元素或组件实例。
ref 引用的元素在后续的操作中被移除或替换，对应的 ref 可能也会变为 undefined 。