我们来说一下vue3 项目中的 hooks 的使用
hooks 和 vue2 当中的 mixin 是类似的，mixin就是混入，通过 mixin 混入来分发 vue 组件中的可复用功能。
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
这两者主要的区别，主要是 hooks 是函数。
我们先看一下hooks优点有哪些？
hooks 特点：
- vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入，不同在于 hooks 是函数。
- vue3 中的 hooks 函数可以提高代码的复用性，能够在不同的组件当中都利用 hooks 函数。
- hooks 函数可以与 mixin 连用，但是不建议。
hooks 基本使用
我们写了一个简单的小案例，上面的代码其实很简单了就，有两个标签，显示可视页面的长度和宽度，然后有一个按钮获取最新的长宽进行显示。
如果我们需要在另一个页面也想实现这个功能的话，也很简单，在直接把上面的代码复制一下到另一个需要实现的页面就可以了。
但是，有没有发现一个问题，就是一个页面需要就复制一遍，一个页面需要就复制一遍，如果有一百个页面就复制一百遍，代码一两行还好，如果是一个超级庞大的工具类，那么在像这样实现的话，是不是就过于复杂了，而且还不好实现，那这个问题怎么解决呢？就是 hooks 。
我们针对上面的案例，我们使用 hooks 简单的实现一下。
首先，我们在 src 文件夹下创建一个 hooks 文件夹。
在 hooks 文件夹下创建一个文件，名字就叫做 useScreenWh.js 文件
接下来，我们把获取可视化界面的代码放进这个 js 文件，然后导出去，给其他页面使用就可以了。
然后在需要使用 hooks 的文件引入就可以使用了。