作用
一些写在setup里面的内容,可以抽取到外部文件,要用的时候引入就可以了
1、减少一个组件的代码量
2、逻辑清晰,想看逻辑,直接跳到对应文件看就可以了
3、方便复用代码
对比Mixin
Mixin会有很多问题,比如命名冲突等等;
而外部Hook函数就没有这个问题
使用
1、定义外部文件
导出一个函数(当然也可以传参数进去)
文件没有命名规则,但约定都用useXXX
import { ref } from "vue";
/** 临时商品数据方法, 涉及保存、读取 */
export default function(localKey:string){
return {}
}
2、在组件中使用
如果上面导出的函数有参数,这里也可以传参数。
函数返回的结果可以直接用
3、如需修改外部公共的变量
外部文件
需要通过watch监听变化
组件使用
先引入
直接在setup( )里面使用,会返回一个ref对象
Hook函数统一出口
设置统一的出口文件index.js
index.js里面引入所有的Hook函数
使用时,直接通过这样引入,方便很多