vue3 + hook +tsx 使用实战

背景

实际业务开发，为了真正的高聚合，外部低耦合，我们不仅仅只是考虑 功能的逻辑代码抽离，对应的还有我们的路由界面,UI视图，类型和接口请求等关联性的问题

单纯的vue3 composition api ：

template无法拆分，对于复杂的业务场景， hooks 解决不了页面庞大，各种 hook 之间，入参出参臃肿的问题

比如：element-plus的一个useSelect 1000 多行代码

而且使用的时候 要解构几十行的代码 给 template 使用

tsx + hook

功能目录：

总结

纯 js 的 compositon api 与 tsx hook 的区别

• 普通 composion api 适合

  抽离公共业务，解决 mixin 存在的问题 逻辑复用，组合各模块的逻辑

• tsx hook 适合 拆分业务模块，保持项目的健壮性，可维护性 解决 componet 的传值问题，维护 store 的数据共享问题