解开 Vue3 中 reactive 和 ref 的玄妙，探寻差异与共性

前言

在 Vue3 中，reactive 和 ref 都是用来定义响应式数据的。reactive 可以让对象类型的数据变成响应式的，而 ref 可以让基本类型的数据（如字符串、数字、布尔值）变成响应式的。

那么，Vue3 中有没有 reactive 能做而 ref 做不了的场景呢？答案是有的。

场景一：对象类型数据的深度响应

reactive 可以让对象类型的数据变成响应式的，但 ref 不行。这意味着，如果一个对象类型的数据中包含了其他对象类型的数据，那么只有使用 reactive 才能让整个对象都变成响应式的。

举个例子，假设我们有一个对象 person，它包含了两个属性：name 和 address。name 是一个字符串，address 是一个对象，它包含了 street 和 city 两个属性。

如果我们使用 reactive 来定义 person 对象，那么 person.name、person.address.street 和 person.address.city 都会变成响应式的。但是，如果我们使用 ref 来定义 person 对象，那么只有 person.name 会变成响应式的，而 person.address、person.address.street 和 person.address.city 都不会变成响应式的。

场景二：数组响应

reactive 可以让数组类型的数据变成响应式的，但 ref 不行。这意味着，如果我们想让数组中的元素变成响应式的，那么就必须使用 reactive。

举个例子，假设我们有一个数组 numbers，它包含了三个元素：1、2 和 3。

如果我们使用 reactive 来定义 numbers 数组，那么 numbers[0]、numbers[1] 和 numbers[2] 都会变成响应式的。但是，如果我们使用 ref 来定义 numbers 数组，那么只有 numbers 本身会变成响应式的，而 numbers[0]、numbers[1] 和 numbers[2] 都不会变成响应式的。

场景三：性能

在某些情况下，使用 reactive 可能比使用 ref 更高效。这是因为，reactive 是通过代理对象来实现响应式的，而 ref 是通过 getter 和 setter 来实现响应式的。代理对象比 getter 和 setter 更高效，因此使用 reactive 可能比使用 ref 更快。

总结

通过以上三个场景的分析，我们可以看到，reactive 和 ref 在 Vue3 中的使用场景是不同的。reactive 可以用于对象类型数据的深度响应、数组响应和提高性能，而 ref 只能用于基本类型数据的响应。

在实际开发中，我们可以根据不同的场景来选择使用 reactive 或 ref。如果我们要让对象类型的数据变成响应式的，或者我们要让数组中的元素变成响应式的，那么就应该使用 reactive。如果我们要让基本类型的数据变成响应式的，那么就可以使用 ref。