作用

一些写在setup里面的内容，可以抽取到外部文件，要用的时候引入就可以了

1、减少一个组件的代码量
2、逻辑清晰，想看逻辑，直接跳到对应文件看就可以了
3、方便复用代码

对比Mixin

Mixin会有很多问题，比如命名冲突等等；
而外部Hook函数就没有这个问题

使用

1、定义外部文件

导出一个函数（当然也可以传参数进去）
文件没有命名规则，但约定都用useXXX
image.png

  1. import { ref } from "vue";
  3. /** 临时商品数据方法, 涉及保存、读取 */
  4. export default function(localKey:string){
  6.   return {}
  7. }

2、在组件中使用

image.png
如果上面导出的函数有参数，这里也可以传参数。
函数返回的结果可以直接用
image.png

3、如需修改外部公共的变量

外部文件
需要通过watch监听变化
image.png

组件使用
先引入
image.png
直接在setup( )里面使用，会返回一个ref对象
image.png

Hook函数统一出口

设置统一的出口文件index.js
image.png
index.js里面引入所有的Hook函数
image.png

使用时，直接通过这样引入，方便很多
image.png