Skip to content

devReplaceArrayData 替换数组内容

将一个数组的内容完全替换为另一组新数据,通过原地修改实现响应式更新,适用于 Vue 等框架中对响应式数组的安全替换。

  • ✅ 在 Vue 中替换数组内容而不破坏响应式引用;
  • ✅ 替代 arr = newArr 的方式,避免响应失效;
  • ✅ 通常用于组件内数据刷新、分页更新、搜索结果替换等场景。

使用示例

ts
import { ref } from 'vue';
import {devReplaceArrayData} from "devecoui-plus"

//🎯 替换普通数组内容
const originalList = [1, 2, 3];
const newList = [4, 5, 6];

devReplaceArrayData(originalList, newList);

console.log(originalList); // 输出: [4, 5, 6]



//🔄 替换响应式数组(如 Vue 中 ref([]))
const users = ref([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
]);

const newUsers = [
    { id: 3, name: '王五' },
    { id: 4, name: '赵六' }
];

// 保持响应式引用不变,内容被更新
devReplaceArrayData(users.value, newUsers);

console.log(users.value);