自定义 Hooks 就是将可重用的逻辑抽象到一个函数中，这样你可以在不同的组件中重复使用这些逻辑，而不必重复编写相同的代码。
index.vue

<template>
  <div>
    <p>原始数组</p>
    <div>{{originArray}}</div>
    <p>反转后的数组</p>
    <div>{{reverseArray}}</div>
    <div>
        <button @click="reverseArrayfun">点击反转</button>
    </div> 
  </div>
</template>

<script setup lang='ts'>
import { 
    ArrayReverser
    } from './useForm'

    const { originArray, reverseArray, reverseArrayfun } = ArrayReverser([1,2,3,4,5,6,7]);  
</script>

ts

export function ArrayReverser(list:any[]){
  const originArray = ref([...list])
  const reverseArray = ref([...list])
  const reverseArrayfun=()=>{
    reverseArray.value= [...originArray.value].reverse()
  }
  return {
    originArray,
    reverseArray,
    reverseArrayfun
  }
}