Vue3:自定义 hook 函数

什么是 hook

        本质是一个函数,hook 翻译为钩子,所有也叫自定义钩子函数

作用:

        把 setup 函数中重复使用的方法(代码片段)进行封装,类似于vue2中的 mixin

不封装前代码(App.vue):Vue3:自定义 hook 函数_第1张图片

 使用步骤:

1.在src目录下创建hooks包,在这个包下面创建 .js 文件(一般是方法名.js):Vue3:自定义 hook 函数_第2张图片

 这里我的是 hook.js

 2.在 hook.js 文件中,创建一个函数然后把要复用代码放进来,最后导出:

Vue3:自定义 hook 函数_第3张图片

 3.在App.vue引入hook.js文件,然后使用

Vue3:自定义 hook 函数_第4张图片

运行结果:

Vue3:自定义 hook 函数_第5张图片

以上代码为两个数的求和小案例,代码简单,以上代码为个人理解,希望能够帮助到大家,如有理解错误的地方,请多多指教,谢谢。

你可能感兴趣的:(vue3,前端,vue.js,javascript)