在 Vue 3 中，响应式数组的操作与 Vue 2 类似，但有一些细微的改进和变化。Vue 3 使用了 Proxy 作为其响应式系统的底层实现，这使得对数组的操作更加高效和精确。以下是如何在 Vue 3 中实现响应式数组操作的步骤：
1. 使用 ref 创建响应式数组
首先，你需要使用 ref 来创建一个响应式数组。
示例代码：
import { ref } from 'vue';
const array = ref([1, 2, 3]);
2. 读取数组
在模板中或响应式函数中，你可以直接读取响应式数组。
示例代码：
<template>
<div v-for="(item, index) in array" :key="index">
{{ item }}
</div>
</template>
<script setup>
import { ref } from 'vue';
const array = ref([1, 2, 3]);
</script>
3. 修改数组
Vue 3 能够追踪数组的变化，包括添加、删除和修改元素。
示例代码：
import { ref } from 'vue';
const array = ref([1, 2, 3]);
function pushItem(item) {
array.value.push(item);
}
function removeItem(index) {
array.value.splice(index, 1);
}
function updateItem(index, newValue) {
array.value[index] = newValue;
}
4. 使用 reactive 创建响应式数组
对于更复杂的数据结构，你可以使用 reactive 来创建一个响应式对象，然后将其数组属性设置为响应式。
示例代码：
import { reactive } from 'vue';
const state = reactive({
array: [1, 2, 3]
});
5. 使用 toRefs 保持数组响应性
当你需要将一个响应式对象的属性解构为单独的响应式变量时，可以使用 toRefs 来保持数组的响应性。
示例代码：
import { reactive, toRefs } from 'vue';
const state = reactive({
array: [1, 2, 3]
});
const { array } = toRefs(state);
6. 注意事项
- 直接修改数组索引或调用数组方法（如
push、pop、splice等）会导致数组的响应式变化。 - 使用
Vue.set或this.$set来保证新增的数组元素也是响应式的（在 Vue 2 中需要，在 Vue 3 中不再需要）。 - 使用
Array.prototype方法（如map、filter、reduce等）不会触发视图更新，因为它们返回一个新数组。如果需要触发更新，应该使用响应式数组方法。
总结
Vue 3 提供了灵活且高效的方式来处理响应式数组。通过使用 ref 和 reactive，你可以轻松地创建和管理响应式数组。Vue 3 的响应式系统会自动追踪数组的变化，并在适当的时候更新视图。通过遵循上述指南，你可以确保你的 Vue 3 应用中的数组操作是响应式的。
