[Vue] reactive() 的局限性有哪些【热度: 410】

[yanlele]

关键词：响应式 api

作者备注
前三条是官网自己总结的限制， 属于核心限制
后面提交是作者自行补充

1. 基本数据类型不是响应式的

reactive 只能将对象或数组转换为响应式对象。对于基本数据类型（如字符串、数字、布尔值等），reactive 无法将其转换为响应式的。如果需要使基本类型数据响应式，应使用 ref。

2. 不能替换整个对象

当你使用 reactive 创建响应式对象后，如果尝试直接替换掉整个响应式对象，新对象不会自动成为响应式的。这是因为 reactive 返回的是原始对象的代理（Proxy），直接替换原始对象并不会改变已经建立的代理关系。解决办法是通过修改对象的属性来实现，或者使用 ref 并对其 .value 进行替换，后者可以保持响应性。

举个例子：

const state = reactive({ count: 0 });

// 这样做是错误的，不会保持响应性
state = { count: 1 };

// 正确做法：修改现有对象的属性值
state.count = 1;

3. 对解构操作不友好

Vue 3 reactive 对象在进行解构操作时会失去其响应性，这是因为解构操作本质上是对对象属性的值进行了一次拷贝。如果对一个响应式对象进行解构赋值，那么得到的新变量不会是响应式的。为了在解构后保持响应性，Vue 3 提供了 toRefs 和 toRef 函数。

• toRefs 可以将 reactive 对象中的每个属性转换为一个 ref 对象，从而保留其响应性。
• toRef 可以为 reactive 对象的某个属性创建一个 ref 引用，同样可以保持其响应性。

举个例子：

const state = reactive({
  count: 0,
  title: "Hello",
});

// 直接解构将会失去响应性
const { count, title } = state;

// 使用 toRefs 解构，保持响应性
const { count, title } = toRefs(state);

这些限制说明了 Vue 3 的响应式系统虽然提供了强大的功能，但在使用过程中需要更加注意一些特定的使用场景和解决方案，以确保数据的响应性不被意外破坏。

4. 返回 Proxy 对象

reactive 返回的是原始对象的 Proxy。这意味着，比较原始对象和通过 reactive 处理后的对象时，必须注意它们并不严格相等（===）。

5. 不支持 IE11 及更早 IE 版本

由于 reactive 基于 Proxy 实现，而 Proxy 是 ES2015 的一个特性，它不被 IE11 或更早版本的 IE 浏览器支持。因此，如果你的应用需要兼容这些浏览器，使用 reactive 可能会有兼容性问题。

6. 响应式转换不可逆

一旦使用 reactive 将一个对象转换为响应式对象，就不能将其转换回原始的非响应式对象。虽然这在大多数情况下不是问题，但在某些特定场景下可能需要注意。

7. 内置类实例的限制

对于某些内置类（例如 Map、Set、Date 等）的实例进行 reactive 转换时，虽然 Vue 3 提供了对这些类型的响应式支持，但在转换后的响应式版本上使用某些原型链上的方法时，可能表现不一致或不符合预期。