作用

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

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

对比Mixin

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

使用

1、定义外部文件

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

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

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