在24年开始，个人逐步从 vue2 迁移到了 vue3 框架的开发，但是在开发过程中的体现也只是部分写法的转变，一些很好用的特性并没有深入学习，单文件过大的拆解前期也仅仅停留在 function 的提取，在这里记录一下后来前两个月才开始使用的 hooks 写法

1. 首先创建 hooks js 文件，在我项目中涉及到了 webgis 模块的多个业务图层的分隔处理，比如加载红绿灯图层并根据数据每秒驱动渲染的逻辑单独封装一个 hooks，可以大大方便后续其他模块对这个功能调用的便捷性。而且有些图层的加载与更新涉及的代码量很大，也可以减少单文件行数，方便后续维护，功能模块的 bug 也更好排查。
   
   以下给一个简单的示例 useExampleHooks.js，记录一下。。。

   export default (initNum) => {
       let convertRuleNum = ref(initNum)
       onMounted(()=>{
           const apiResult = 10000
           convertRuleNum.value += apiResult
       })
       const numConvert = (num) => {
           return num.toFixed(2)
       }
       // 导出要在其他多个模块使用的变量和方法
       return { convertRuleNum, numConvert }
   }

2. 在 vue 文件中使用 hooks

   import useExampleHooks from './useExampleHooks.js'
   const { convertRuleNum, numConvert } = useExampleHooks(10)

   <div>{{ convertRuleNum }}</div>
   <div>{{ numConvert(10) }}</div>