vue3hooks的使用

hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks 还真是函数的一种写法。

vue3 借鉴 react hooks 开发出了 Composition API ，所以也就意味着 Composition API 也能进行自定义封装 hooks。

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。
需要我们创建一个hooks的文件夹然后里面分模块分别把代码放下去

hooks里面的users.ts里面的代码import {ref,reactive,onMounted,computed} from "vue";
const codeStr = ref<string>('1234567890qwertyuiopa6786741287sdfghjklzxcv7890901243bnm');
interface Iform{num:number;sum:number
}
const red = ref<string>("我喜欢你");
export default function ():any {const codeNumProject = ref();const splitCodeNum = ref<string[]>(codeStr.value.split(''))const form = reactive<Iform>({num:2,sum:2})const comNum = computed(()=>{return form.num*form.num})onMounted(()=>{red.value+"--"+"我也喜欢西"})for(let i = 0;i<6;i++){const n = Math.floor(Math.random()*codeStr.value.length)codeNumProject.value += codeStr.value.split('')[n]}// 给外部提供数据和方法的地方return {codeNumProject,splitCodeNum,comNum,red}
}