智慧政务门户网站建设方案企业培训体系

在 Vue 3 中，当你使用 reactive 创建一个响应式数组后，如果你想用一个新的数组对象来替换它，同时保持响应性，有几种方法可以实现

方法一：直接替换整个数组（推荐）

import { reactive } from 'vue';const breadcrumbs = reactive([{}]);// 新的数组对象
const newBreadcrumbs = [{ name: 'Home' }, { name: 'About' }];// 直接替换整个数组
breadcrumbs.splice(0, breadcrumbs.length, ...newBreadcrumbs);

方法二：使用 Object.assign

import { reactive } from 'vue';const breadcrumbs = reactive([{}]);// 新的数组对象
const newBreadcrumbs = [{ name: 'Home' }, { name: 'About' }];// 清空原数组并添加新元素
breadcrumbs.length = 0;
breadcrumbs.push(...newBreadcrumbs);

方法三：使用扩展运算符（不推荐，会失去响应性）

import { reactive } from 'vue';const breadcrumbs = reactive([{}]);// 新的数组对象
const newBreadcrumbs = [{ name: 'Home' }, { name: 'About' }];// 这种方法会失去响应性，不推荐
// breadcrumbs = newBreadcrumbs; // 错误！会失去响应性

方法四：使用 ref 包裹数组（替代方案）

如果你发现 reactive 在数组替换上有问题，可以考虑使用 ref：

import { ref } from 'vue';const breadcrumbs = ref([{}]);// 新的数组对象
const newBreadcrumbs = [{ name: 'Home' }, { name: 'About' }];// 直接替换值
breadcrumbs.value = newBreadcrumbs;

最佳实践

对于数组操作：优先使用数组方法如 push, pop, splice 等，而不是直接赋值

对于需要完全替换数组的情况：使用 splice 或先清空再 push 新元素

考虑使用 ref：如果数组需要频繁替换，ref 可能是更好的选择