reactive的缺点

Vue 3 中 reactive 函数的主要作用是创建一个响应式的对象，它通过使用 ES6 的 Proxy 对象来实现对原对象属性的拦截和代理。尽管 Vue 3 的响应式系统在性能上有很大提升，但 reactive 也存在一些潜在的缺点或需要注意的地方：

1. 深度反应性成本：

   • 当你用 reactive 创建了一个嵌套的对象或数组时，整个对象树都会变成响应式的。这意味着即使深层嵌套的属性变化也会触发依赖更新，对于大型复杂数据结构，可能会有更高的内存占用和性能开销。

2. 解构丢失响应性：

   • 如果你从一个 reactive 对象中解构出属性，并直接返回这些值，那么这些值将失去响应性。这是因为解构出来的变量不再受到原始 reactive 对象的代理控制，修改它们不会自动触发视图更新。
   • 示例：

     const state = reactive({ count: 0 });
     const { count } = toRefs(state);
     // 这里count是有响应性的，因为它来自于toRefs
     // 但如果只是简单地解构...
     const { count: directCount } = state;
     // 直接赋值给directCount会导致其失去响应性
     

3. 与原生JavaScript API不完全兼容：

   • 使用 reactive 包装的对象不再是原生JavaScript对象，因此某些原生方法（如 Object.assign()、Object.keys() 等）直接应用于该对象可能不会按预期工作。需要使用Vue提供的工具函数如 toRaw() 或者框架内集成的方法来确保正确操作。

4. 学习曲线和心智负担：

   • 尤其是对Vue 2开发者来说，理解和掌握如何正确使用 reactive 及其与 ref 的区别可能增加了一定的学习成本和代码阅读理解难度。开发者需要清楚何时以及如何适当地应用这两种响应式API以避免出现非预期行为。

5. 调试复杂度：

   • 在开发过程中，由于Vue 3响应式系统的内部原理较为复杂，排查涉及响应式数据流的问题可能相对困难，特别是在处理深层次的数据交互时。

总体而言，虽然 reactive 提供了强大的功能，但在使用时确实需要权衡性能、理解和维护上的考虑。不过，Vue 3 的设计允许开发者根据具体需求选择合适的响应式方案，并提供了诸如 toRefs 和 shallowReactive 等工具来优化和简化问题。

Vue 3 中的 shallowReactive 函数与 reactive 类似，都是用来创建响应式对象的。但是，shallowReactive 的特点是仅将所给对象的第一层属性转换为响应式，而不会深入到对象内部嵌套的对象或数组中去。

这意味着，当你对 shallowReactive 包装过的对象的第一层属性进行修改时，视图会自动更新；但如果这个属性本身是一个对象，那么对其内部属性的修改并不会触发依赖更新和视图刷新。

使用场景：

• 当你有一个深层嵌套的数据结构，但知道在实际应用中只会更改外层属性时，可以使用 shallowReactive 来减少不必要的性能开销。
• 如果数据结构的内部深度很大，且这些深层次的数据改动相对独立或者不频繁，使用 shallowReactive 可以避免不必要的代理设置，提高性能。

例如：

import { shallowReactive } from 'vue';

const user = shallowReactive({
  name: 'John Doe',
  address: {
    city: 'New York',
    country: 'USA'
  }
});

// 这将触发视图更新
user.name = 'Jane Doe';

// 这将不会触发视图自动更新
user.address.city = 'San Francisco';

在上面的例子中，改变 user.name 会触发视图的响应式更新，而直接修改 user.address.city 则不会。如果需要让 address 对象内部的变更也能引起视图更新，则应使用 reactive 而不是 shallowReactive。

如果你想一次性修改多个属性值，你可以直接在 reactive 对象上进行连续的赋值操作。每个单独的赋值都会触发响应式更新。

如果你有一个对象包含了新的属性值，并且希望一次性将这些值应用到原始的 reactive 对象上，可以使用扩展运算符（Spread syntax）或 Object.assign() 方法。但是需要注意的是，扩展运算符和 Object.assign() 都不会递归地使嵌套对象变为响应式。因此，对于嵌套的对象属性，你需要预先将其转换为响应式或者直接在原对象上修改。

下面是一个使用 Object.assign() 修改多个属性的例子：

import { reactive } from 'vue';

const user = reactive({
  name: 'John Doe',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
});

// 新的属性值对象
const newUserValues = {
  name: 'Jane Doe',
  age: 35,
  address: {
    // 注意：这里address仍然是一个普通对象，它的变更不会触发视图更新
    city: 'San Francisco'
  }
};

// 使用 Object.assign() 一次性修改多个属性
Object.assign(user, newUserValues);

// 如果需要 address 嵌套对象也保持响应式，需提前转换：
user.address = reactive(newUserValues.address);

对于上述代码中 address 的嵌套对象，如果想确保其内部属性的修改也能触发响应式更新，需要先将其转换为响应式对象（如示例中的最后一行所示）。如果 newUserValues.address 已经是通过 reactive 创建的响应式对象，则无需再做处理。

原文链接：https://juejin.cn/post/7325627349079392265 作者：ZSheeran