深度面试：数组响应

本节目标：理解“深度面试：数组响应”的核心思路，并能把它用于实际开发或面试表达。在 Vue 3 中，使用 ref 或 reactive 接收后端返回的列表数据（数组），当你修改数组中对象的属性时，是否会触发响应取决于具体情况。以下是详细说明：

1. 使用 reactive 接收数组 如果使用 reactive 包装整个数组，数组本身及其内部对象的属性变化都会触发响应式更新，因为 reactive 会深度代理对象，包括数组中的每个对象。 import { reactive } from 'vue'; const state = reactive([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' },]); _// 修改数组中对象的属性_state[0].name = 'Charlie'; // 触发响应式更新原因：reactive 创建的代理对象会递归地代理数组中的每个对象，因此修改对象属性（如 name）会触发响应。

2. 使用 ref 接收数组 如果使用 ref 接收数组，ref 的 .value 是一个普通 JavaScript 数组（非响应式）。但如果数组中的元素是对象，且这些对象是通过 reactive 或其他响应式 API 创建的，修改这些对象的属性仍然会触发响应。 javascript Copy import { ref } from 'vue'; const list = ref([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' },]); _// 修改数组中对象的属性_list.value[0].name = 'Charlie'; // 不会触发响应式更新原因：ref 的 .value 是一个普通数组，数组中的对象是普通对象（非响应式）。Vue 不会自动为这些对象添加响应式代理，因此修改它们的属性不会触发响应。 解决方案：如果需要数组中的对象也具有响应式，可以在接收数据时手动将数组或对象转为 reactive： javascript Copy import { ref, reactive } from 'vue'; const list = ref([]); _// 假设从后端获取数据_const rawData = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' },]; _// 将数据转为响应式_list.value = rawData.map(item => reactive(item)); _// 修改属性_list.value[0].name = 'Charlie'; // 现在会触发响应式更新 或者直接将整个数组用 reactive 包装： javascript Copy const list = reactive(rawData); _// 修改属性_list[0].name = 'Charlie'; // 触发响应式更新

3. 注意数组操作的响应式问题 即使使用 reactive 或 ref 正确设置了响应式，某些数组操作可能不会触发响应式更新。例如：

直接通过索引赋值（如 list[0] = newObj）：
- 对于 reactive 数组，会触发响应式更新。
- 对于 ref 数组，需操作 list.value（如 list.value[0] = newObj），且确保 newObj 是响应式的。
修改数组长度（如 list.length = 1）：
- 对于 reactive 数组，会触发响应。
- 对于 ref 数组，需操作 list.value.length，但仍需注意数组元素是否响应式。
使用非响应式方法（如 list.push(newObj)）：
- 对于 reactive 数组，push 等方法已被代理，会触发响应。
- 对于 ref 数组，list.value.push(newObj) 会触发 ref 的更新，但 newObj 本身需要是响应式的。

4. 最佳实践

优先使用 reactive 包装整个数组，特别是当数组元素是对象且需要响应式时，reactive 能简化操作。
后端数据处理：在接收后端数据时，显式地将数据转为响应式（通过 reactive 或 map 处理）。
避免直接操作 ref 的普通对象：如果使用 ref，确保数组中的对象是 reactive 或其他响应式对象。
使用 Vue 提供的数组方法：如 push、splice 等，这些方法在 reactive 数组中是响应式的。

5. 总结

使用 reactive：修改数组中对象的属性会触发响应式更新。
使用 ref：默认情况下，修改数组中普通对象的属性不会触发响应，除非手动将对象转为 reactive。
推荐做法：将后端返回的数组用 reactive 包装，或对数组元素逐个应用 reactive，以确保修改对象属性时触发响应。

如果你有具体的代码或场景，可以提供进一步优化建议！

深度面试：数组响应 ​

深度面试：数组响应