Vue 中的 ref 与 reactive：让你的应用更具响应性（上）

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 一、引言
    • 介绍 ref 与 reactive 的背景和重要性
  • 二、 ref 的基本概念
    • 解释 ref 的定义和作用
    • 展示如何创建和使用 ref
    • 讨论 ref 的一些常见用例
  • 三、 reactive 的基本概念
    • 解释 reactive 的定义和作用
    • 展示如何创建和使用 reactive 对象
    • 讨论 reactive 的一些常见用例

一、引言

介绍 ref 与 reactive 的背景和重要性

ref 和 reactive 是 Vue 3 中引入的新特性，它们的背景和重要性如下：

  1. ref 的背景和重要性：
  • 在 Vue 2 中，通过使用 v-bind 和 v-on 等指令来实现数据的双向绑定。但是，在某些情况下，需要直接操作 DOM 元素或组件实例，这时候就需要使用 ref 属性。
  • ref 允许你通过引用的方式访问 DOM 元素或组件实例，从而方便地进行直接操作。在 Vue 3 中，ref 有了一些改进，它现在可以引用任何类型的值，包括组件实例、函数、对象等。
  1. reactive 的背景和重要性：
  • 在 Vue 2 中，响应式系统是基于对象的属性监听实现的。当一个对象的属性发生变化时，Vue 会自动触发更新。
  • 然而，在某些情况下，需要对一个基本数据类型的值进行响应式处理，这时候就需要使用 reactive 方法。
  • reactive 方法可以将一个基本数据类型的值转换为响应式对象，从而使其能够参与到 Vue 的响应式系统中。

总的来说，ref 和 reactive 都是 Vue 3 中重要的新特性，它们提供了更强大和灵活的方式来处理 DOM 元素和数据，从而提高了开发效率和代码质量。

二、 ref 的基本概念

解释 ref 的定义和作用

在 Vue 3 中，ref 用于引用 DOM 元素或组件实例。它允许你通过引用的方式直接访问和操作 DOM 元素或组件实例。

ref 的定义如下：

const ref = Vue.createRef()

或

const ref = useRef()

其中，Vue.createRef() 是 Vue 实例方法，用于创建一个引用对象；useRef() 是Composition API 中的一个函数，也用于创建引用对象。

ref 的作用有以下几个方面：

  1. 获取 DOM 元素：通过 ref，你可以获取对应的 DOM 元素，并进行直接操作，如修改元素的属性、调用元素的方法等。
  2. 引用组件实例：除了 DOM 元素，你还可以使用 ref 来引用组件实例，从而直接访问和操作组件的属性和方法。
  3. 传递引用：通过将 ref 传递给其他组件或函数，你可以在其他地方访问和操作对应的 DOM 元素或组件实例。

需要注意的是，使用 ref 时要遵循一些最佳实践，如避免在多个地方使用同一个 ref 来引用同一个元素或组件实例，以免引发意外行为。此外，在组件中使用 ref 时，要确保组件的生命周期方法（如 created、mounted 等）已经执行完毕，以确保引用的元素或组件实例已经准备好。

展示如何创建和使用 ref

在 Vue 3 中，创建和使用 ref 的方法与 Vue 2 类似，但有一些细微的差别。下面是一个简单的示例，展示了如何在 Vue 3 中创建和使用 ref。

  1. 首先，在 Vue 3 中，你需要使用 defineComponent 方法来定义一个组件，例如：
import { defineComponent } from 'vue';export default defineComponent({name: 'MyComponent',setup() {// 在这里编写组件的逻辑},
});
  1. 接下来，你可以使用 ref 方法来创建一个引用，例如：
import { ref } from 'vue';export default defineComponent({name: 'MyComponent',setup() {const count = ref(0);// 你可以使用这个引用，例如：return {count,};},
});

在这个示例中，我们创建了一个名为 count 的引用，并将其初始值设置为 0。然后，我们将这个引用返回给组件，以便在模板中使用它。

  1. 在模板中，你可以使用 v-bind 指令将引用绑定到 DOM 元素，例如：
<template><div><p>Count: {{ count }}</p><button v-bind="count">Increment</button></div>
</template>

在这个示例中，我们将 count 引用绑定到 <p> 元素和一个按钮上。当用户点击按钮时，count 的值会增加。

  1. 最后，你可以使用 ref 引用来操作组件或元素的属性，例如：
import { ref } from 'vue';export default defineComponent({name: 'MyComponent',setup() {const count = ref(0);function increment() {count.value++;}return {count,increment,};},
});

在这个示例中，我们定义了一个名为 increment 的函数，用于增加 count 的值。然后，我们将这个函数返回给组件，以便在模板中使用它。

总的来说，在 Vue 3 中使用 ref 方法非常简单，你可以使用它来获取对组件或元素的引用，操作组件或元素，并避免直接修改属性。

讨论 ref 的一些常见用例

ref 在 Vue 3 中是一个非常有用的特性，它提供了一种方便的方式来引用 DOM 元素或组件实例。以下是一些常见的用例：

  1. 获取 DOM 元素：通过使用 ref，你可以获取到特定的 DOM 元素，并直接操作它的属性、方法或监听其事件。这对于执行一些与 DOM 相关的操作非常方便。例如：
// 创建一个 ref 来引用元素
const myElement = ref(null);// 在模板中使用 ref
<template><div ref="myElement"></div>
</template>// 获取引用的 DOM 元素
const element = myElement.value;
  1. 引用组件实例：除了引用 DOM 元素，你还可以使用 ref 来引用组件实例。这使得你能够直接访问和操作组件的属性和方法。例如：
// 创建一个 ref 来引用组件实例
const myComponent = ref(null);// 在模板中使用 ref
<template><MyComponent ref="myComponent"></MyComponent>
</template>// 获取引用的组件实例
const component = myComponent.value;
  1. 传递引用：通过将 ref 传递给其他组件或函数，你可以在不同的地方共享对同一个 DOM 元素或组件实例的引用。这有助于在组件之间进行通信和协同工作。例如：
// 创建一个 ref
const myElement = ref(null);// 将 ref 传递给子组件
<ChildComponent :element="myElement" />// 在子组件中使用传递的 ref
const { element } = props;
  1. 处理生命周期事件：你可以使用 ref 来监听 DOM 元素或组件实例的生命周期事件。通过在 ref 的回调函数中处理这些事件，可以在特定的生命周期阶段执行相应的操作。例如：
// 创建一个 ref 来引用元素
const myElement = ref(null);// 监听 ref 对应的元素的 click 事件
myElement.value.addEventListener('click', handleClickEvent);// 处理点击事件的函数
function handleClickEvent() {console.log('点击事件触发');
}

总之，ref 提供了一种方便的方式来引用和操作 DOM 元素、组件实例，并在组件之间传递引用。它在一些常见的场景中非常有用，例如与 DOM 交互、处理组件通信和监听生命周期事件等。

三、 reactive 的基本概念

解释 reactive 的定义和作用

在 Vue 3 中，reactive 是一个用于创建响应式数据的函数。它将一个普通的对象转换为响应式对象，使其能够与 Vue 的响应式系统进行集成。

reactive 的定义如下：

import { reactive } from 'vue'
const myObject = reactive({ data: 123 })

reactive 的作用是使对象的属性具有响应性。当你修改响应式对象的属性时，Vue 会自动检测到变化，并触发相应的更新。这使得在 Vue 组件中使用响应式数据变得更加方便和高效。

通过使用 reactive 创建响应式对象，你可以将复杂的数据结构（如对象、数组等）与 Vue 的模板进行双向绑定，实现数据的实时更新和视图的自动渲染。

需要注意的是，reactive 只对对象的属性修改进行响应，而不对对象的整体替换进行响应。如果你需要对整个对象进行替换，可以使用 Vue.set 或 vm.$set 方法。

展示如何创建和使用 reactive 对象

在 Vue 3 中，你可以使用 reactive 方法来创建一个响应式对象，以便在组件或元素中使用。下面是一个简单的示例，展示了如何在 Vue 3 中创建和使用 reactive 对象。

  1. 首先，在 Vue 3 中，你需要使用 defineComponent 方法来定义一个组件，例如：
import { defineComponent } from 'vue';export default defineComponent({
name: 'MyComponent',
setup() {// 在这里编写组件的逻辑
},
});
  1. 接下来，你可以使用 reactive 方法来创建一个响应式对象，例如：
import { reactive } from 'vue';export default defineComponent({
name: 'MyComponent',
setup() {const state = reactive({count: 0,message: 'Hello, Vue 3!',});// 你可以使用这个对象，例如：return {state,};
},
});

在这个示例中，我们使用 reactive 方法创建了一个名为 state 的响应式对象，并将其初始值设置为 { count: 0, message: 'Hello, Vue 3!' }。然后，我们将这个对象返回给组件，以便在模板中使用它。

  1. 在模板中，你可以使用 v-bind 指令将响应式对象绑定到 DOM 元素，例如：
<template>
<div><p>Count: {{ state.count }}</p><p>Message: {{ state.message }}</p><button v-bind="state">Increment</button>
</div>
</template>

在这个示例中，我们将 state 对象绑定到 <p> 元素和一个按钮上。当用户点击按钮时，state 对象的 count 属性会增加，而 message 属性不会改变。

  1. 最后，你可以使用 reactive 对象的属性来操作对象，例如：
import { reactive } from 'vue';export default defineComponent({
name: 'MyComponent',
setup() {const state = reactive({count: 0,message: 'Hello, Vue 3!',});function increment() {state.count++;}return {state,increment,};
},
});

在这个示例中，我们定义了一个名为 increment 的函数，用于增加 state 对象的 count 属性。然后，我们将这个函数返回给组件，以便在模板中使用它。

总的来说，在 Vue 3 中使用 reactive 方法非常简单，你可以使用它来创建一个响应式对象，以便在组件或元素中使用。

讨论 reactive 的一些常见用例

reactive 在 Vue 3 中是一个非常重要的特性，它提供了一种创建响应式数据的简洁方式。以下是一些常见的用例：

  1. 创建响应式对象：使用 reactive 可以将一个普通对象转换为响应式对象。当响应式对象的属性发生变化时，相关的组件会自动更新。这对于处理复杂的数据结构非常有用。例如：
// 创建一个响应式对象
const myObject = reactive({ data: 123 });// 修改对象的属性
myObject.data += 1;console.log(myObject.data);
  1. 创建响应式数组：reactive 也可以用于创建响应式数组。响应式数组的元素变更时，相关的组件也会自动更新。例如：
// 创建一个响应式数组
const myArray = reactive([1, 2, 3]);// 修改数组的元素
myArray.push(4);console.log(myArray);
  1. 与 Computed 属性结合使用：通过将 reactive 对象与计算属性（Computed Properties）结合使用，可以创建基于响应式数据的动态计算。例如：
// 创建一个响应式对象
const myObject = reactive({ data: 123 });// 创建一个计算属性
const computedData = computed(() => myObject.data * 2);console.log(computedData);
  1. 在组件之间传递响应式数据：通过使用 reactive 创建响应式数据，可以在组件之间传递数据，并且当数据发生变化时，相关的组件会自动更新。这有助于保持组件之间的数据一致性。例如：
// 创建一个响应式对象
const myObject = reactive({ data: 123 });// 在子组件中使用响应式数据
<ChildComponent :data="myObject.data" />

总之，reactive 提供了一种简单而高效的方式来创建响应式数据，使你的 Vue 应用更加动态和灵活。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/317950.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android14之audit2allow自动生成Selinux规则(一百七十五)

Android14之audit2allow自动生成Selinux规则(一百七十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
Intellij IDEA 快速开发参考

Intellij IDEA 快速开发参考

快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE&#xff0c;为大多数操作建议了键盘快捷键。在这个主题中&#xff0c;您可以找到最不可缺少的列表&#xff0c;使 IntelliJ IDEA 轻松实现第一步。 核心快捷键表&#xff1a; 操作快捷键根据名称查找操作CtrlSh…
阅读更多...
贪心算法part05 435无重叠区间

贪心算法part05 435无重叠区间

435无重叠区间 763 划分字母区间 56合并区间
阅读更多...
为什么JAVA_HOME修改后Java版本不变

为什么JAVA_HOME修改后Java版本不变

今天的实验需要对java project进行降版本后重构。于是去Oracle官网下载了jdk1.7。然后将系统环境变量JAVA_HOME改成了安装后的jdk1.7路径。即 C:\Program Files\Java\jdk1.7.0_80 系统变量Path中直接引用了%JAVA_HOME%\bin。 但是当我查看版本&#xff0c;却出现了javac改了…
阅读更多...
新版selenium4.0 + Python使用详解

新版selenium4.0 + Python使用详解

1、selenium简介 Selenium是一个用于Web应用程序测试的工具&#xff0c;Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。支持的浏览器包括IE&#xff08;7, 8, 9, 10, 11&#xff09;&#xff0c;Mozilla Firefox&#xff0c;Safari&#xff0c;Google…
阅读更多...
基于ssm的资产管理信息系统+vue论文

基于ssm的资产管理信息系统+vue论文

摘要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。以前企业对于资产信息的管理和控制&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以人力为主的管理模式已然落后。本人结…
阅读更多...
Ubuntu Server 22.04 连接Wifi并配置静态IP

Ubuntu Server 22.04 连接Wifi并配置静态IP

Ubuntu Server 22.04 连接Wifi并配置静态IP 前言&#xff1a;我家最近好几台电脑&#xff0c;我都想跑着Ubuntu Server做服务器&#xff0c;但是近几年的超级本已经不自带网口了&#xff0c;所以我就考虑用Wifi来联网&#xff0c;速度也还可以&#xff0c;但是既然是跑服务&…
阅读更多...
CEC2017（Python）：五种算法（DBO、HHO、RFO、SSA、PSO）求解CEC2017

CEC2017（Python）：五种算法（DBO、HHO、RFO、SSA、PSO）求解CEC2017

一、5种算法简介 1、蜣螂优化算法DBO 2、哈里斯鹰优化算法HHO 3、红狐优化算法RFO 4、麻雀搜索算法SSA 5、粒子群优化算法PSO 二、CEC2017简介 参考文献&#xff1a; [1]Awad, N. H., Ali, M. Z., Liang, J. J., Qu, B. Y., & Suganthan, P. N. (2016). “Problem d…
阅读更多...
网络工程师的必备技能与职业素养

网络工程师的必备技能与职业素养

因为是计算机网络技术专业&#xff0c;因此毕业后做的都是相关工作。今天结合自己的亲身经历总结一下网络工程师应该具备的能力和素质&#xff0c;有做乙方实施项目&#xff0c;也有在甲方公司躺平的经历&#xff0c;个人觉得能够做的一些东西。也有看到一些文章说不要专注于技…
阅读更多...
c语言-浮点型数据在内存中的存储

c语言-浮点型数据在内存中的存储

目录 前言一、浮点数存储例子二、浮点数在内存的存储格式2.1 32位浮点数存储格式2.2 64位浮点数存储格式 三、IEEE 754对有效数字M和指数E的规定3.1 对存储有效数字M的规定3.2 对存储指数E的规定3.2.1 E在32位浮点数的存储格式3.2.2 E在64位浮点数的存储格式 3.3 对读取有效数M…
阅读更多...
阶段十-分布式-Redis02

阶段十-分布式-Redis02

第一章 Redis 事务 1.1 节 数据库事务复习 数据库事务的四大特性 A&#xff1a;Atomic &#xff0c;原子性&#xff0c;将所以SQL作为原子工作单元执行&#xff0c;要么全部执行&#xff0c;要么全部不执行&#xff1b;C&#xff1a;Consistent&#xff0c;一致性&#xff0…
阅读更多...
栈实现前缀表达式的计算

栈实现前缀表达式的计算

前缀表达式计算 过程分析 中缀表达式&#xff1a;&#xff08;1 5&#xff09;*3 > 前缀表达式&#xff1a;*153 &#xff08;可参考这篇文章&#xff1a;中缀转前缀&#xff09; 第一步&#xff1a;从右至左扫描前缀表达式&#xff08;已存放在字符数组中&#xff09;&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023