一、什么是hooks

"hooks"直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：

系统运行到某一时期时，会调用被注册到该时机的回调函数。

比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。
以上这些，都可以被称一声"hook"。
但是很显然，在特定领域的特定话题下，hooks 这个词被赋予了一些特殊的含义。

二、vue3中hooks实现

1、在src目录下新建hooks文件夹，再新建setName.ts 和setNums.ts两个ts文件

setNums.ts代码：

import {ref} from 'vue'
export const useNumbers = ()=>{
  let num = ref(Math.floor(Math.random()*10))
  const addNum = (n:number = 1)=>{
    num.value += n
  }
  return{
    num,addNum
  }
}

setName.ts代码：

import {ref} from 'vue'
import {useNumbers} from './setNums'

export const useName = ()=>{
  const {num,addNum} = useNumbers()
  const name = ref('rose')
  const setName = (value:string):void=>{
    name.value = value
  }
  return {
    name,setName,num,addNum
  }
}

2、在components中新建两个组件：Test.vue、Child.vue

Child.vue组件：

<template>
  {{ name }}
  <button @click="setName('eagle')">setName</button>
</template>
<script lang="ts" setup>
import { useName } from '@/hooks/setName';
const { name, setName } = useName()
</script>

Test.vue组件：

<template>
  {{ name }}
  <button @click="setName('jack')">set</button>
  <br />
  <Child />
  <br />
  {{ num }}
  <button @click="handleAdd">addNum</button>
</template>
<script lang="ts" setup>
import Child from '@/components/Child.vue'
import { useName } from '@/hooks/setName'
const { name, setName, num, addNum } = useName()
const handleAdd = () => {
  addNum()
}
</script>

然后在App.vue中引入Test.vue组件即可，这样就实现了简单hooks方法！！hooks中可以套hooks，方便实用！