Vue 3 中的 ref 完全指南

🕗 发布于 2024-11-16 11:44 vue.js javascript 前端 web 前端框架

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 属性访问和修改数据。

import { ref } from 'vue';

const count = ref(0); // 定义一个响应式的计数器变量
console.log(count.value); // 访问 count 的值，输出 0

count.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); // 定义响应式变量 count

function 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 定义数组时，可以直接使用数组的修改方法（如 push、pop 等），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 钩子在组件挂载后执行，获取并输出方块的高度。

五、`toRefs` 与 `reactive` 的结合

ref 更适合管理单一数据，而如果我们有多个属性的对象需要响应式管理，通常会使用 reactive。当我们希望在组合 API 中把 reactive 对象的属性暴露到模板中时，可以使用 toRefs 将 reactive 转换为 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 结合：在需要处理多个属性的对象时，建议使用 reactive 和 toRefs 组合。

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

原文地址：https://blog.csdn.net/2301_79858914/article/details/143794733

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【数据结构】【线性表】循环链表(附C语言源码)
下一篇：gunicorn 和 uvicorn部署fastapi 或者flask

基于RK3588的移动充电机器人应用解决方案
伴随着国内新能源汽车保有量的持续增长，充电难题愈发凸显，配套充电设施的建设需求进一步扩大。可外接4G/5G、WiFi模块，用于传感数据、视频数据的上传，同时，通过网络的连接，能够远程监控机器人的状态和
阅读更多2024-11-16
开源，一天200star，解锁视频字幕生成新方式——一款轻量级开源字幕工具，免费，支持花字，剪映最新会员模式吃相太难看了
是一款基于开源的轻量级视频字幕生成工具，由开发者 @WEIFENG2333 精心打造。其主要目的是为用户提供一套免费、易用的字幕生成方案，支持各种视频格式，并结合现代化的自然语言处理技术，实现精准、高
阅读更多2024-11-16
docker：基于Dockerfile镜像制作完整案例
docker：基于Dockerfile镜像制作完整案例
阅读更多2024-11-16
【数据库系列】 Spring Boot 集成 Neo4j 的详细介绍
Spring Boot 提供了对 Neo4j 的良好支持，使得开发者可以更方便地使用图数据库。通过使用 Spring Data Neo4j，开发者可以轻松地进行数据访问、操作以及管理。本文将详细介绍如
阅读更多2024-11-16
微信小程序02-页面制作
微信小程序提供了丰富的组件，如view、image等，用于构建具有微信风格的UI界面。视口单位用于移动端页面适配，如vw和vh。表单组件用于收集用户信息，如form、button、input等。
阅读更多2024-11-16
2024 CCF中国开源大会“开源科学计算与系统建模openSCS”分论坛成功举办
目前MWORKS用户已遍及国内外295所高校，仅深圳就有41家应用验证企业，覆盖新能源、芯片、车辆、低空经济、医疗、制造、自动化、电力、航天、金融、船舶等优势行业单位，已经具备良好的生态基础。该委员会
阅读更多2024-11-16
C&C++内存管理
pChar3是指针变量，存在栈中，*pChar3是由const修饰的，pChar3指向的内容不能修改，内容具有常属性，因此pChae3存在代码段中，也就是常量区。内存泄漏并不是指内存在物理上的消失，而
阅读更多2024-11-16
单片机面试
答案：宏定义是在编译预处理阶段被处理的。预处理包含：头文件包含，宏替换，条件编译，去除注释，添加行号。
阅读更多2024-11-16
Ubuntu23.10下解决C语言调用mysql.h问题
在学习C语言和MySQL的调用的时候遇到包和版本的问题，由于使用的书很老（10年的），因此很多MySQL的包已经过时，在查找很多资料和询问gpt之后得到了解决方案
阅读更多2024-11-16
高级java每日一道面试题-2024年11月07日-Redis篇-Redis有哪些功能?
Redis 是一个功能强大且灵活的 NoSQL 数据库，广泛应用于缓存、消息队列、实时分析等多种场景。在高级 Java 面试中，了解 Redis 的数据类型、持久化、发布/订阅、事务、Lua 脚本、主
阅读更多2024-11-16

Vue 3 中的 ref 完全指南