在 Vue2 中我们可以使用 Mixins 混入来完成对一些公共方法的封装，后面在组件中使用时只需要将混入引进去就可以了，混入在以前有些过点击可以去看 混入的写法 ，但是在 Vue3 中，我们可以使用 hooks 来完成同样功能。

hooks 文件

import {ref} from 'vue'

export default () => {
  const test = ref('我是hooks里面的属性')
  const testMethod = () => {
    console.log('我是hooks里面的方法')
  }
  // 在这里我们需要将他们暴露出去
  return {
    test, 
    testMethod
  }
}

组件内使用

<template>
  <div> {{ test }} </div>
  <button @click='testMethod()'></button>
</template>

<script setup>
// 将hook.js文件引入需要使用的组件里面
import hook from '@/hooks/hook.js'

// 通过解构赋值将需要的属性方法添加进组件中
const {
  test, 
  testMethod
} = hook()

</script>