> For the complete documentation index, see [llms.txt](https://yanzhandong868.gitbook.io/v3hooks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yanzhandong868.gitbook.io/v3hooks/ui/usedynamiclist.md).

# useDynamicList

一个帮助你管理列表状态，并能生成唯一 key 的 Hook。

## 使用Demo

```
<template>
  <div class="hello" style="display:flex;align-items:flex-start;">
    <div style="width: 60vw">
      <p 
        v-for=" (active,index) in list" 
        :key="getKey(index)"
        style="width: 100%;height:60px;border:1px solid #cccccc;line-height:60px;"
      > value:{{ active }} uuid:{{getKey(index)}}</p>
    </div>
    <div style="width:39vw">
      <button @click="()=> insert(0,Math.random())">insert头部插入</button>
      <button @click="()=> resetList(['a','b','c'])">重置</button>
      <button @click="()=> merge(0, [Math.random(),Math.random()])">头部插入多个</button>
      <button @click="()=> replace(1, Math.random())">第二个替换</button>
      <button @click="()=> remove(1)">删除第二个</button>
      <button @click="()=> move(0,2)">一三互换位置</button>
      <button @click="()=> push(Math.random())">尾部插入</button>
      <button @click="()=> pop()">尾部删除</button>
      <button @click="()=> unshift(Math.random())">头部插入</button>
      <button @click="()=> shift()">头部删除</button>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { useDynamicList } from "v3hooks";

export default {
  props: {
    msg: String,
  },
  setup() {
    const defalutValue = ref(['a','b','c'])
    const { 
      list,
      insert,
      resetList,
      merge,
      replace,
      remove,
      move,
      getKey,
      push,
      pop,
      unshift,
      shift,
    } = useDynamicList(defalutValue);


    return {
      list,
      insert,
      resetList,
      merge,
      replace,
      remove,
      move,
      getKey,
      push,
      pop,
      unshift,
      shift
    };
  },
};
</script>
```

useDynamicList接受一个数组，导出一个list及一系列操作数组的方法。

## Api

### Params

| 参数           | 说明     | 类型    | 默认值  |
| ------------ | ------ | ----- | ---- |
| initialValue | 列表的初始值 | T\[ ] | \[ ] |

### Result

| 参数        | 说明             | 类型                                           |
| --------- | -------------- | -------------------------------------------- |
| list      | 当前的列表          | T\[ ]                                        |
| resetList | 重新设置 list 的值   | (list: T\[ ]) => void                        |
| insert    | 在指定位置插入元素      | (index: number, obj: T) => void              |
| merge     | 在指定位置插入多个元素    | (index: number, obj: T\[ ]) => void          |
| replace   | 替换指定元素         | (index: number, obj: T) => void              |
| remove    | 删除指定元素         | (index: number) => void                      |
| move      | 移动元素           | (oldIndex: number, newIndex: number) => void |
| getKey    | 获得某个元素的 uuid   | (index: number) => number                    |
| getIndex  | 获得某个key的 index | (key: number) => number                      |
| push      | 在列表末尾添加元素      | (obj: T) => void                             |
| pop       | 移除末尾元素         | () => void                                   |
| unshift   | 在列表起始位置添加元素    | (obj: T) => void                             |
| shift     | 移除起始位置元素       | () => void                                   |