使用reactive导致数据失去响应式？1. 直接赋值的陷阱在 Vue 的响应式系统中，reactive 对象是一个深

1. 直接赋值的陷阱

在 Vue 的响应式系统中，reactive 对象是一个深度代理，它会追踪对象属性的变更，但如果你将整个对象重新赋值，那么 Vue 无法继续追踪新的对象。这是因为 Vue 的响应式机制并不支持对整个对象的直接替换。

示例:

import { reactive } from 'vue';

const state = reactive({
  user: {
    name: 'John',
    age: 30
  }
});

// 错误示例：直接赋值
state.user = {
  name: 'Jane',
  age: 25
}; // Vue 无法追踪到这个赋值操作，视图不会更新

在上述示例中，state.user 被重新赋值为一个新的对象。虽然 user 的新属性会在内存中存在，但 Vue 无法检测到这种直接赋值的操作，因此视图不会更新。

2. 正确的做法

2.1 使用 Vue 提供的方法更新数据

Vue 推荐的做法是使用 Vue 的响应式 API 提供的方法来更新对象的属性，而不是直接替换整个对象。这确保了 Vue 的响应式系统能够正确地跟踪和更新数据。

示例:

import { reactive, set } from 'vue';

const state = reactive({
  user: {
    name: 'John',
    age: 30
  }
});

// 正确的做法：使用 Vue 提供的方法更新属性
state.user.name = 'Jane'; // 正确，会触发视图更新
state.user.age = 25; // 正确，会触发视图更新

2.2 使用 `Object.assign` 合并对象

如果需要更新对象的多个属性，可以使用 Object.assign 或其他类似的合并方法来更新对象，而不是直接替换整个对象。

示例:

import { reactive } from 'vue';

const state = reactive({
  user: {
    name: 'John',
    age: 30
  }
});

// 合并更新：保持响应式
Object.assign(state.user, {
  name: 'Jane',
  age: 25
}); // 正确，会触发视图更新

2.3 使用 `Vue.set`（适用于 Vue 2）

在 Vue 2 中，可以使用 Vue.set 方法来确保添加新的响应式属性。但是在 Vue 3 中，这种方法已经被弃用，改用 reactive 的深度响应式机制。

示例 (Vue 2):

import Vue from 'vue';

const state = Vue.observable({
  user: {
    name: 'John',
    age: 30
  }
});

// Vue 2 的用法
Vue.set(state.user, 'name', 'Jane'); // 正确，会触发视图更新

3. 处理嵌套对象

如果你的 reactive 对象包含嵌套的对象，你需要注意避免直接替换嵌套对象，而是修改其属性。

示例:

import { reactive } from 'vue';

const state = reactive({
  user: {
    profile: {
      name: 'John',
      age: 30
    }
  }
});

// 错误示例：直接替换嵌套对象
state.user.profile = {
  name: 'Jane',
  age: 25
}; // Vue 无法追踪到这个赋值操作，视图不会更新

// 正确示例：修改嵌套对象的属性
state.user.profile.name = 'Jane'; // 正确，会触发视图更新
state.user.profile.age = 25; // 正确，会触发视图更新

4. 总结

直接给 reactive 对象的属性赋值会导致 Vue 的响应式失效，因此需要避免这种操作。通过使用 Vue 提供的方法更新属性或合并对象，可以确保响应式数据的正确性和视图的同步更新。在开发过程中，理解和遵循这些原则能够帮助你避免常见的陷阱，提升应用的稳定性和可维护性。

09/13 再见

再见.png

使用reactive导致数据失去响应式？