reactive 和 ref 的区别和联系

2024-08-21 15:52
文章标签 区别 联系 ref reactive

本文主要是介绍reactive 和 ref 的区别和联系,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在 Vue3 的组合式 API (Composition API)中,ref 和 reactive 是用于创建响应式数据的两个核心函数。尽管二者都用于实现响应式数据,但在使用方式和适用场景上存在一些区别。

1. 基本概念

1.1 ref

用途:用于定义 基本类型(如字符串、数字、布尔值)和 简单对象 的响应式数据。

返回值:一个包含 value 属性的 响应式对象

特点:

1、对于基本类型,ref 会将其包装在一个带有 .value 属性的对象中。

2、对于对象类型,ref 也会对其内部属性进行深度响应式转换。

1.2 reactive

用途:用于定义 复杂对象(如对象、数组)的响应式数据。

返回值:原始对象的 响应式代理 proxy

特点:

1、对传入的对象进行 深度响应式 转换,即对象内部所有嵌套的属性也都是响应式的。

2、返回的对象看起来与原始对象相同,不用通过 .value 访问属性。

2. 具体描述

2.1 深度响应性

1、ref

1)对于 基本类型,ref 只包装值本身。

2)对于 对象类型,ref 会对对象内部进行 深度响应式 处理,与 reactive 类似。

示例

const obj = ref({a: 1,b: {c: 2}
});obj.value.b.c = 3; // 响应式更新

2、reactive 

1)总是对传入的对象进行 深度响应式 处理。

示例

const obj = reactive({a: 1,b: {c: 2}
});obj.b.c = 3; // 响应式更新

注意:在 Vue 3 中,reactive 和 ref 对对象类型的数据都会进行深度响应式处理。

2.2 解构问题

解构赋值时的响应性丢失

1、reactive 对象在解构时会丢失响应性。

<template><div>state.count:{{ state.count }}</div>
</template><script setup>
import { reactive } from 'vue';
const state = reactive({count: 0
});
let { count } = state;
console.log('count:', count);
count++; // 不是响应式的,界面不会更新
console.log('count:', count);
</script>

解决方案:使用 toRefs 将 reactive 对象转换为响应式引用

import { reactive, toRefs } from 'vue';
const state = reactive({count: 0
});
const { count } = toRefs(state);
console.log('count:', count);
count.value++; // 响应式更新,界面会更新
console.log('count:', count);

2、ref 在解构时同样也会丢失响应性,因为解构操作提取的是当前值,而不是保持对 ref 对象的响应式引用。

import { ref } from 'vue';
const countRef = ref(0);
// 解构 ref
const { value: countValue } = countRef;
// 修改 ref 的值
countRef.value++;
console.log('countValue:', countValue); // 输出 0,因为 countValue 已经解构出来,并且不再响应// 直接使用 ref 的 .value 属性
console.log('countRef.value:', countRef.value); // 输出 1,因为 countRef 仍然是响应式的

2.3 响应式转换的辨识

1、ref 创建的响应式对象有一个 Ref 标记,可以通过 isRef 进行判断。

import { ref, isRef } from 'vue';
const count = ref(0);
console.log(isRef(count)); // true

2、reactive 创建的响应式对象可以通过 isReactive 进行判断。 

import { reactive, isReactive } from 'vue';
const state = reactive({ count: 0 });
console.log(isReactive(state)); // true

3. 何时使用

1、ref 

当需要创建一个简单的、可响应的基本类型数据(如字符串、数字、布尔值)时。

当需要从 reactive 对象中解构某个属性,并保持响应性时,可以使用 toRef 或 toRefs。

2、reactive

当需要创建包含多个属性的对象或数组,并希望所有嵌套属性都具有响应性时。

当需要在模板中频繁访问对象的多个属性时,reactive 会比多个 ref 更简洁。

这篇关于reactive 和 ref 的区别和联系的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1093602

相关文章

native和static native区别

本文基于Hello JNI  如有疑惑,请看之前几篇文章。 native 与 static native java中 public native String helloJni();public native static String helloJniStatic();1212 JNI中 JNIEXPORT jstring JNICALL Java_com_test_g

Android fill_parent、match_parent、wrap_content三者的作用及区别

这三个属性都是用来适应视图的水平或者垂直大小,以视图的内容或尺寸为基础的布局,比精确的指定视图的范围更加方便。 1、fill_parent 设置一个视图的布局为fill_parent将强制性的使视图扩展至它父元素的大小 2、match_parent 和fill_parent一样,从字面上的意思match_parent更贴切一些,于是从2.2开始,两个属性都可以使用,但2.3版本以后的建议使

Collection List Set Map的区别和联系

Collection List Set Map的区别和联系 这些都代表了Java中的集合,这里主要从其元素是否有序,是否可重复来进行区别记忆,以便恰当地使用,当然还存在同步方面的差异,见上一篇相关文章。 有序否 允许元素重复否 Collection 否 是 List 是 是 Set AbstractSet 否

javascript中break与continue的区别

在javascript中,break是结束整个循环,break下面的语句不再执行了 for(let i=1;i<=5;i++){if(i===3){break}document.write(i) } 上面的代码中,当i=1时,执行打印输出语句,当i=2时,执行打印输出语句,当i=3时,遇到break了,整个循环就结束了。 执行结果是12 continue语句是停止当前循环,返回从头开始。

maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令

maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令 在日常的工作中由于各种原因,会出现这样一种情况,某些项目并没有打包至mvnrepository。如果采用原始直接打包放到lib目录的方式进行处理,便对项目的管理带来一些不必要的麻烦。例如版本升级后需要重新打包并,替换原有jar包等等一些额外的工作量和麻烦。为了避免这些不必要的麻烦,通常我们

ActiveMQ—Queue与Topic区别

Queue与Topic区别 转自:http://blog.csdn.net/qq_21033663/article/details/52458305 队列(Queue)和主题(Topic)是JMS支持的两种消息传递模型:         1、点对点(point-to-point,简称PTP)Queue消息传递模型:         通过该消息传递模型,一个应用程序(即消息生产者)可以

深入探讨:ECMAScript与JavaScript的区别

在前端开发的世界中,JavaScript无疑是最受欢迎的编程语言之一。然而,很多开发者在使用JavaScript时,可能并不清楚ECMAScript与JavaScript之间的关系和区别。本文将深入探讨这两者的不同之处,并通过案例帮助大家更好地理解。 一、什么是ECMAScript? ECMAScript(简称ES)是一种脚本语言的标准,由ECMA国际组织制定。它定义了语言的语法、类型、语句、

Lua 脚本在 Redis 中执行时的原子性以及与redis的事务的区别

在 Redis 中,Lua 脚本具有原子性是因为 Redis 保证在执行脚本时,脚本中的所有操作都会被当作一个不可分割的整体。具体来说,Redis 使用单线程的执行模型来处理命令,因此当 Lua 脚本在 Redis 中执行时,不会有其他命令打断脚本的执行过程。脚本中的所有操作都将连续执行,直到脚本执行完成后,Redis 才会继续处理其他客户端的请求。 Lua 脚本在 Redis 中原子性的原因

msys2 minggw-w64 cygwin wsl区别

1 mingw-w64,这是gcc一直win平台下产生的,所以是win版的gcc,既支持32也支持64bit 2cygwin专注于原样在windows上构建unix软件, 3msys让Linux开发者在windows上运行软件,msys2专注于构建针对windows api构建的本机软件 4 wsl  windows subsystem for linux 是一个在windows 10 上能

【Java中的位运算和逻辑运算详解及其区别】

Java中的位运算和逻辑运算详解及其区别 在 Java 编程中,位运算和逻辑运算是常见的两种操作类型。位运算用于操作整数的二进制位,而逻辑运算则是处理布尔值 (boolean) 的运算。本文将详细讲解这两种运算及其主要区别,并给出相应示例。 应用场景了解 位运算和逻辑运算的设计初衷源自计算机底层硬件和逻辑运算的需求,它们分别针对不同的处理对象和场景。以下是它们设计的初始目的简介: