Vue 3 中的 ref 完全指南

news/2024/11/17 21:30:21/
webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

Vue 3 中的 ref 完全指南

Vue 3 引入了 Composition API,其中 ref 是关键的一部分。ref 可以让我们更方便地在组件中定义响应式数据,在模板中使用 <script setup> 语法糖时尤为简洁。本文将详细讲解 Vue 3 中 ref 的概念、用途及常见用法,并通过示例展示如何在实际开发中利用 ref 提升开发效率。


一、什么是 ref

ref 是 Vue 3 Composition API 中定义响应式数据的核心函数。ref 可以使基本类型(字符串、数字、布尔值等)和复杂数据类型(数组、对象等)都具备响应式特性。当 ref 定义的数据发生变化时,Vue 会自动追踪并更新模板中对应的数据展示。

使用 ref 创建响应式数据

在 Vue 3 中,通过引入 ref 函数,我们可以轻松定义一个响应式数据。ref 会返回一个包含值的对象,通过 .value 属性访问和修改数据。

javascript">import { ref } from 'vue';const count = ref(0); // 定义一个响应式的计数器变量
console.log(count.value); // 访问 count 的值,输出 0count.value = 10; // 修改 count 的值
console.log(count.value); // 访问修改后的值,输出 10

在上述示例中,我们通过 ref(0) 创建了一个响应式的 count,并通过 .value 访问或更改其值。


二、基础用法

1. 定义和修改响应式数据

<script setup> 中,可以直接使用 ref 来定义数据并应用在模板中:

<template><div><p>当前计数:{{ count }}</p><button @click="increment">增加计数</button></div>
</template><script setup>
import { ref } from 'vue';const count = ref(0); // 定义响应式变量 countfunction increment() {count.value++; // 更新 count 的值
}
</script>

解释:

  • count 是响应式的,当 count.value 更新时,<p>{{ count }}</p> 会自动重新渲染。
  • 在模板中直接使用 count 时,Vue 会自动解析 .value,无需手动调用 count.value

2. 响应式数据的双向绑定

ref 常用于实现双向绑定,比如将表单输入的内容实时绑定到变量中:

<template><div><input v-model="username" placeholder="请输入用户名" /><p>您输入的用户名是:{{ username }}</p></div>
</template><script setup>
import { ref } from 'vue';const username = ref(''); // 定义响应式变量 username
</script>

解释:

  • v-model 指令会自动绑定输入值到 username 变量,并且每次输入内容变化时,Vue 会自动更新视图中的展示值。

三、 ref 与复杂数据类型

1. 对象类型的 ref

ref 不仅可以定义基本类型数据,还可以定义对象类型。我们可以直接修改对象内部的属性,Vue 会自动监听并更新。

<template><div><p>用户名:{{ user.name }}</p><p>年龄:{{ user.age }}</p><button @click="updateUser">修改用户名</button></div>
</template><script setup>
import { ref } from 'vue';const user = ref({name: '张三',age: 25
});function updateUser() {user.value.name = '李四'; // 修改对象内部属性
}
</script>

注意:虽然 user 是一个对象,但仍需要通过 user.value 访问其属性。

2. 数组类型的 ref

ref 定义数组时,可以直接使用数组的修改方法(如 pushpop 等),Vue 会响应式地跟踪数组内容的变化。

<template><div><p>任务列表:</p><ul><li v-for="task in tasks" :key="task">{{ task }}</li></ul><button @click="addTask">添加任务</button></div>
</template><script setup>
import { ref } from 'vue';const tasks = ref(['学习 Vue 3', '完成项目']);function addTask() {tasks.value.push('新任务'); // 向数组中添加元素
}
</script>

在这个例子中,Vue 会监听 tasks 数组的变化,每次调用 addTask 方法时,新的任务会自动添加到列表中并显示在页面上。


四、ref 在 DOM 中的应用

1. 获取 DOM 元素的引用

在 Vue 3 中,可以通过 ref 获取 DOM 元素的引用,这样可以更灵活地操作 DOM 元素。

<template><div><input type="text" ref="inputRef" placeholder="请输入内容" /><button @click="focusInput">聚焦输入框</button></div>
</template><script setup>
import { ref } from 'vue';const inputRef = ref(null); // 定义一个 DOM 引用function focusInput() {inputRef.value.focus(); // 调用 DOM 的 focus 方法
}
</script>

解释

  • inputRef 是一个 DOM 引用,通过 <input ref="inputRef"> 绑定到具体的输入框。
  • 当点击按钮时,focusInput 方法会聚焦到输入框。

2. 监听 DOM 元素的变化

在某些场景下,我们可能需要在 DOM 元素变化时获取最新的高度、宽度等属性,可以结合 ref 和 Vue 的 onMounted 钩子实现。

<template><div ref="boxRef" class="box">我是一个方块</div>
</template><script setup>
import { ref, onMounted } from 'vue';const boxRef = ref(null);onMounted(() => {console.log("方块高度:", boxRef.value.offsetHeight);
});
</script><style scoped>
.box {width: 100px;height: 100px;background-color: skyblue;
}
</style>

解释

  • boxRef 用来引用 .box 元素。
  • onMounted 钩子在组件挂载后执行,获取并输出方块的高度。

五、toRefsreactive 的结合

ref 更适合管理单一数据,而如果我们有多个属性的对象需要响应式管理,通常会使用 reactive。当我们希望在组合 API 中把 reactive 对象的属性暴露到模板中时,可以使用 toRefsreactive 转换为 ref

示例:

<template><div><p>用户名:{{ user.name }}</p><p>年龄:{{ user.age }}</p><button @click="incrementAge">增加年龄</button></div>
</template><script setup>
import { reactive, toRefs } from 'vue';const user = reactive({name: '张三',age: 25
});function incrementAge() {user.age++;
}const userRefs = toRefs(user);
</script>

六、总结

  • 定义响应式数据ref 用于定义基本数据类型和复杂数据类型的响应式数据。
  • 双向绑定ref 变量可以通过 v-model 实现表单的双向绑定。
  • DOM 引用:使用 ref 获取并操作 DOM 元素。
  • reactive 结合:在需要处理多个属性的对象时,建议使用 reactivetoRefs 组合。

ref 是 Vue 3 响应式系统中的核心工具,通过熟练掌握 ref,可以在 Vue 开发中更加灵活地实现数据绑定和界面交互。


http://www.ppmy.cn/news/1547809.html

相关文章

通过Docker实现openGauss的快速容器化安装

容器安装 本章节主要介绍通过 Docker 安装 openGauss&#xff0c;方便 DevOps 用户的安装、配置和环境设置。 支持的架构和操作系统版本 x86-64 CentOS 7.6 ARM64 openEuler 20.03 LTS 配置准备 使用 buildDockerImage.sh 脚本构建 docker 镜像&#xff0c;buildDockerIm…

BERT框架详解

BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是由Google在2018年提出的一种自然语言处理&#xff08;NLP&#xff09;模型。BERT通过使用Transformer架构&#xff0c;实现了对文本的双向上下文理解&#xff0c;从而在多个NLP任务中取…

IntelliJ+SpringBoot项目实战(七)--在SpringBoot中整合Redis

Redis是项目开发中必不可少的缓存工具。所以在SpringBoot项目中必须整合Redis。下面是Redis整合的步骤&#xff1a; &#xff08;1&#xff09;因为目前使用openjweb-sys作为SpringBoot的启动应用&#xff0c;所以在openjweb-sys模块的application-dev.yml中增加配置参数&…

环境贴图选用方式

选择使用 RGBELoader 还是 TextureLoader 加载纹理&#xff0c;主要取决于你的纹理类型和用途。以下是两种加载器的使用场景&#xff1a; new RGBELoader()//设置纹理文件的路径.setPath(/textures/)//加载 HDR 环境贴图.load(royal_esplanade_1k.hdr, (texture) > {//Equir…

利用人工智能提升京东销售效率和用户体验的创新应用

摘要 随着技术的迅猛发展&#xff0c;人工智能&#xff08;AI&#xff09;正深刻地改变着电商行业的未来。作为中国领先的电商平台之一&#xff0c;京东积极运用AI技术&#xff0c;从购物推荐、会员分类到商品定价&#xff0c;全面提升销售效率和用户体验。本文将深入探讨京东…

D3的竞品有哪些,D3的优势,D3和echarts的对比

D3 的竞品 ECharts: 简介: ECharts 是由百度公司开发的一款开源的 JavaScript 图表库&#xff0c;提供了丰富的图表类型和高度定制化的配置选项。特点: 易于使用&#xff0c;文档详尽&#xff0c;社区活跃&#xff0c;支持多种图表类型&#xff08;如折线图、柱状图、饼图、散点…

任务函数分析

一、页面存储栈 PageStack 1、头文件 #include "ui.h"#define MAX_DEPTH 6typedef long long int StackData_t;typedef struct {StackData_t Data[MAX_DEPTH];uint8_t Top_Point;}user_Stack_T;uint8_t user_Stack_Push(user_Stack_T* stack, StackData_t datain)…

ubontu--cuDNN安装

1. 下载 cuDNN https://developer.nvidia.com/cudnn 2. 拷贝到服务器/home/<username>文件夹下 解压缩到当前文件夹&#xff1a; tar -xvf cudnn-linux-x86_64-9.5.1.17_cuda11-archive.tar.xz复制头文件和库文件到cuda安装目录/usr/local/cuda/ sudo cp /home/usern…