1、为什么要封装 Hooks ？
众所周知，在Vue2中，同一个.vue组件中，如果 data、methods、computed、watch 的体量较大，那么我们的代码就会显得很臃肿。
我们应该怎么解决这个问题呢？解决代码臃肿的问题，除了拆分组件，还是拆分组件。
你会不会好奇，在Vue3中是否会出现同样的问题呢？又是怎么解决的呢？
这个问题的答案是肯定存在同样的问题，Vue3中，每当我们的组件变得更大的时候，逻辑关注点就越多，这样就更不利于我们对组件的理解和阅读。
但是与Vue2不同的一点是，在Vue3中，我们除了通过拆分组件的方法来解决代码臃肿，还可以使用Hooks封装来解决这一问题。
哪什么是Hooks封装呢？
Hooks封装，就是把不同的逻辑关注点抽离出来，以达到业务逻辑的独立性。这也是Vue3 对比Vue2的最大亮点之一。
2、如何封装 Hooks 呢？
首先我们要在setup 组合的开发模式下，
然后把具体某个业务功能所用到的 ref、reactive、watch、computed、watchEffect 等，
提取到一个以 use* 开头的自定义函数中去。
把它封装在以use* 开头的Hooks函数中，有什么样的好处呢？
其一享受到封装带来的便利性，还有利于代码逻辑的复用。
其二Hooks函数有一个特点，被复用时可以保持作用域的独立性，即：同一个Hooks函数被多次复用，彼此是不干扰的。
3、在哪些情况下需要封装 Hooks呢？我总结了两种场景：
一种是功能类Hooks，即为了逻辑复用的封装；
另一种是业务类Hooks，即为了逻辑解耦的封装。
下面我给两组代码，说明这两种使用场景。
4、示例：功能类 Hooks封装
5、示例：业务类 Hooks封装
封装Hooks不能为了封装而封装。要考虑以下几点：
- 是否有复用的价值？
- 是否有利于逻辑的分离？
- 是否有助提升代码的可阅读性和可维护性？