vue3 中使用hook

vue3 中的composition api （简称hook, vue-hook, vhook），后续直接使用简称介绍

理念

它的理念是：

TIP

将一个功能的逻辑代码放在一起，而不是按照功能模块分开，这样的好处是逻辑更清晰，维护更方便。

优点

它的什么优点，解决了什么问题：

TIP

1. 解决了vue2中 Mixin 的 难以追溯，无法传参隔离，变量相互覆盖 的问题
2. 内部高聚合，外部低耦合，解决了过于分散，模块穿插太多,难以维护 的问题
3. 解决了this心智负担，以及this混乱挂载注入的问题

我们来回忆下 option api

option api 介绍

option api：同一个功能耦合到各个模块，难以维护，如果再加上Mixin,Store, 业务庞大的时候，就会很痛苦了

composition api 介绍

composition api: 将同一个功能的代码放在一起，便于维护，便于追溯，便于传参隔离

对比图：

hook理念图：

问题

vue3 中使用hook理论很好，但是实际情况是，

1. 心智负担很大，不知道怎么写hook，不知道改怎么拆分hook,从哪里入手!!
2. 系统业务繁忙，业务迭代快，没有时间去写hook，或者写好的hook第一个版本合适，下个版本就不合适了
3. hook之间的业务并不是完全独立的，传参和变量隔离很难做到，导致hook之间的耦合度很高，维护起来也很麻烦

WARNING

同样是写hook, 有的人就能写得和诗一样，有的人却能写得像💩一样!!!