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
    }
}