vue3 hooks例子
自定义 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
}
}