Vue3中提供了两个常用的响应式API,这篇笔记用来解释为什么我们更常用Ref
1. 数据类型限制
ref
支持非复杂类型和复杂类型数据的使用,而在reactive
中只能支持复杂数据的使用,这是因为两者源码上设计的不同
ref
类似option API
中的data
,使用getter
和setter
对传入的数据通过value
的属性进行劫持,而reactive
则完全使用Proxy
进行劫持,因此只能接受复杂数据类型
2. 使用上的响应式丢失
不同于ref
的value
访问,在reactive
中,一旦对整个对象改变或间接赋值以及解构赋值都会导致响应式的丢失,这一点会出现在我们日常开发中却注意不到
let late = reactive({ count: 1 });
console.log(late);
// 改变对象
late = { count: 2 };
//断开连接赋值
let n = late.count;
n++;
console.log(late);
3. 组合式API
在组合式函数中,也更应该使用ref
来定义响应式数据, 更方便我们进行开发
要说Ref最大的缺陷那就是非模板下强制性的".value" 访问语法了,虽然在3.2版本后官方的实验性语法支持以及Volar插件支持可以免去这个后缀写法,但为了更好的区分并没有在后续版本合并采纳,还是推荐大家使用".value"语法