useArray

一个强大的数组状态管理 Hook，提供响应式数组状态和丰富的数组操作方法。

基础用法

📋 待办事项管理

📝 暂无待办事项，添加一个开始吧！

显示代码

数组操作示例

🔢 数字数组操作

🔢 点击"添加随机数"开始操作

显示代码

API 参考

参数

参数	类型	默认值	说明
initialValue	T[]	[]	数组的初始值

返回值

useArray 返回一个数组，包含以下元素：

const [list, actions, length, isEmpty] = useArray<T>(initialValue);

索引	名称	类型	说明
0	list	ComputedRef<readonly T[]>	只读的响应式数组
1	actions	ArrayActions<T>	数组操作方法对象
2	length	ComputedRef<number>	数组长度的计算属性
3	isEmpty	ComputedRef<boolean>	数组是否为空的计算属性

ArrayActions 方法

方法	类型	说明
push	(...items: T[]) => void	添加元素到数组末尾
pop	() => T | undefined	移除并返回最后一个元素
shift	() => T | undefined	移除并返回第一个元素
unshift	(...items: T[]) => void	添加元素到数组开头
splice	(start: number, deleteCount?: number, ...items: T[]) => T[]	删除/插入元素
remove	(item: T) => boolean	移除指定元素（第一个匹配项）
removeAt	(index: number) => T | undefined	移除指定索引的元素
insertAt	(index: number, item: T) => void	在指定索引插入元素
updateAt	(index: number, item: T) => boolean	更新指定索引的元素
clear	() => void	清空数组
replace	(newArray: T[]) => void	替换整个数组
filter	(predicate: (item: T, index: number) => boolean) => void	过滤数组元素
sort	(compareFn?: (a: T, b: T) => number) => void	排序数组
reverse	() => void	反转数组

类型定义

export type UseArrayReturn<T> = [ComputedRef<readonly T[]>, ArrayActions<T>, ComputedRef<number>, ComputedRef<boolean>];

export interface ArrayActions<T> {
  push: (...items: T[]) => void;
  pop: () => T | undefined;
  shift: () => T | undefined;
  unshift: (...items: T[]) => void;
  splice: (start: number, deleteCount?: number, ...items: T[]) => T[];
  remove: (item: T) => boolean;
  removeAt: (index: number) => T | undefined;
  insertAt: (index: number, item: T) => void;
  updateAt: (index: number, item: T) => boolean;
  clear: () => void;
  replace: (newArray: T[]) => void;
  filter: (predicate: (item: T, index: number) => boolean) => void;
  sort: (compareFn?: (a: T, b: T) => number) => void;
  reverse: () => void;
}

使用场景

1. 列表管理 - 待办事项、购物车、用户列表等
2. 数据操作 - 数组的增删改查操作
3. 排序过滤 - 数据的排序和过滤功能
4. 状态管理 - 复杂数组状态的统一管理

注意事项

1. 返回的 list 是只读的，只能通过 actions 中的方法修改
2. 所有操作都是响应式的，会自动触发视图更新
3. filter 和 sort 方法会直接修改原数组
4. 数组操作遵循 JavaScript 原生数组方法的行为