为什么更推荐使用Ref而不是Reactive

开发 · 01-24 · 49 人浏览

Vue3中提供了两个常用的响应式API,这篇笔记用来解释为什么我们更常用Ref

1. 数据类型限制

ref支持非复杂类型和复杂类型数据的使用,而在reactive中只能支持复杂数据的使用,这是因为两者源码上设计的不同

ref类似option API中的data,使用gettersetter对传入的数据通过value的属性进行劫持,而reactive则完全使用Proxy进行劫持,因此只能接受复杂数据类型

2. 使用上的响应式丢失

不同于refvalue访问,在reactive中,一旦对整个对象改变或间接赋值以及解构赋值都会导致响应式的丢失,这一点会出现在我们日常开发中却注意不到

let late = reactive({ count: 1 });

console.log(late);

// 改变对象
late = { count: 2 };

//断开连接赋值
let n = late.count;
n++;

console.log(late);

2024-01-25T08:57:28.png

3. 组合式API

在组合式函数中,也更应该使用ref来定义响应式数据, 更方便我们进行开发

要说Ref最大的缺陷那就是非模板下强制性的".value" 访问语法了,虽然在3.2版本后官方的实验性语法支持以及Volar插件支持可以免去这个后缀写法,但为了更好的区分并没有在后续版本合并采纳,还是推荐大家使用".value"语法
Vue 响应式
Theme Jasmine by Kent Liao