你可能有疑问,为什么对象类型不能用ref呢?

简介: 你可能有疑问,为什么对象类型不能用ref呢?

reactive对比ref

  • 从定义数据角度对比:
  • ref用来定义:基本类型数据
  • reactive用来定义:对象(或数组)类型数据
  • 备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象


  • 从原理角度对比:
  • ref通过Object.defineProperty()getset来实现响应式(数据劫持)。
  • reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。


  • 从使用角度对比:
  • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value
  • reactive定义的数据:操作数据与读取数据:均不需要.value


你可能有疑问,为什么对象类型不能用ref呢?


使用 ref 函数创建的响应式数据是基于 Vue 3 的 Ref 类型实现的,它主要用于包装基本类型的值,并提供了响应式的访问和更新接口。虽然 ref 可以用于创建对象类型的响应式数据,但并不建议这样做,因为在处理对象类型数据时,ref 的行为与预期可能不一致,而且在某些情况下会导致代码出现问题。


举个例子来说明为什么不建议使用 ref 来创建对象类型的响应式数据:

 import { ref, reactive } from 'vue';
 // 使用 ref 创建基本类型数据
 const count = ref(0);
 // 使用 ref 创建对象类型数据
 const user = ref({ name: 'Alice', age: 25 });
 // 尝试修改对象属性
 user.value.name = 'Bob';
 console.log(user.value); // { name: 'Bob', age: 25 }

这个例子中,我们首先使用 ref 创建了一个基本类型的响应式数据 count,以及一个对象类型的响应式数据 user。然后,我们尝试直接修改 user 对象的属性,结果发现对象的属性修改成功了。


尽管我们使用了 ref 创建了 user 对象,但是 ref 返回的是一个 Ref 对象,而不是一个普通的对象。所以在修改 user 对象时,实际上是在修改 Ref 对象的 value 属性的值,而不是直接修改对象本身。但由于 Vue 3 对 Ref 对象进行了特殊处理,使其可以像普通对象一样使用,因此在这个例子中修改 user 对象的属性看起来是有效的。


然而,这种做法并不是 Vue 3 官方推荐的方式。为了避免出现意料之外的问题,并且保持代码的一致性和可读性,我们应该使用 reactive 函数来创建对象类型的响应式数据,而不是使用 ref哈



相关文章
|
10月前
|
编译器 C#
C#.Net筑基-类型系统②常见类型 --record是什么类型?
`record`在C#中是一种创建简单、只读数据结构的方式,常用于轻量级数据传输。它本质上是类(默认)或结构体的快捷形式,包含自动生成的属性、`Equals`、`ToString`、解构赋值等方法。记录类型可以继承其他record或接口,但不继承普通类。支持使用`with`语句创建副本。例如,`public record User(string Name, int Age)`会被编译为包含属性、相等比较和`ToString()`等方法的类。记录类型提供了解构赋值和自定义实现,如密封的`sealed`记录,防止子类重写。
|
10月前
|
安全 API C#
C#.Net筑基-类型系统②常见类型--枚举Enum
枚举(enum)是C#中的一种值类型,用于创建一组命名的整数常量。它们基于整数类型(如int、byte等),默认为int。枚举成员可指定值,未指定则从0开始自动递增。默认值为0。枚举可以与整数类型互相转换,并可通过`[Flags]`特性表示位域,支持位操作,用于多选场景。`System.Enum`类提供了如`HasFlag`、`GetName`等方法进行枚举操作。
106 7
|
存储 安全 编译器
02-📝C++核心语法|C++对C的扩展【::作用域运算符、名字控制、struct类型加强、C/C++中的const、引用(reference)、函数】
复习`C++核心语法`,且适当进行汇编探索底层实现原理,进一步夯实基础,为以后的`底层开发`、`音视频开发`、`跨平台开发`、`算法`等方向的进一步学习埋下伏笔。
02-📝C++核心语法|C++对C的扩展【::作用域运算符、名字控制、struct类型加强、C/C++中的const、引用(reference)、函数】
|
前端开发 Java 开发者
在工作中如何使用枚举(enum)
枚举是JDK 1.5中引入的新特性,由一组固定的常量组成合法值的类型,例如一年中的季节、一周的星期数。
895 2
|
安全 编译器 C++
【C++基础】引用的用法、const常量引用
作用:给变量起别名,新别名指向的是同一块内存。 语法:数据类型 &别名 = 原名
243 0
【C++基础】引用的用法、const常量引用