Vue3 中有场景是 reactive 能做而 ref 做不了的吗？

前言

如果你使用过 Vue3，你知道的，在 Vue3 中有两个非常常用的响应式 API：reactive 和 ref。它们会把我们想要追踪的数据变成响应式。

而且我们在使用时一直被告知 ref 用于创建基础类型的响应式，也可以创建引用类型的响应式。而对于引用类型，底层也是转换为 reactive 来进行响应式处理。那既然这样为撒还需要 reactive ，全部使用 ref 不就行了吗？

虽然 ref 创建的响应式数据在脚本中需要通过 .value 才能访问到呀！但是这里肯定影响不大。并且在模板中会自动添加上 .value，所以模板中不需要通过 .value 访问。

既然这二者基本没差别，但是还是暴露了 reactive 这个 API，难道有什么场景是 reactive 能做而 ref 做不了的？

image.png

简单了解 ref & reactive

我们先简单了解一下这两个 API。

reactive

返回对象的响应式副本，响应式转换是“深层”的——它影响所有嵌套 property。我们一般这样写。

const obj = reactive({ count: 0 })

并且可以直接使用。

const count = obj.count

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个  .value property，指向该内部值。我们一般是这样写。

const data = ref(xxx)

引用的时候，一般会通过data.value的方式引用。

const dataValue = data.value

通过跟踪 Vue3 的源代码可以证明，当我们调用 ref 方法来定义响应式数据时，当参数为对象类型时，其实里面用的是 reactive 方法。也就是说上面的 data.value ÿ