洛阳网站建设优化案例,广州营销推广,制作网站的软件叫什么,崇信县门户网站官网vue3 Hooks 封装loading使用
个人理解#xff1a;Hooks 就是 钩子 的意思#xff0c;在特定时机执行的函数
之前不理解Hooks和自定义封装的utils函数有什么区别#xff0c;它们都是函数#xff0c;逐步理解到utils函数没有vue里面的响应式api#xff0c;而自定义Hooks可…vue3 Hooks 封装loading使用
个人理解Hooks 就是 钩子 的意思在特定时机执行的函数
之前不理解Hooks和自定义封装的utils函数有什么区别它们都是函数逐步理解到utils函数没有vue里面的响应式api而自定义Hooks可以使用响应式api比如ref、reactive、onMounted等等
举例说明: loading大家都不陌生在项目请求接口时需要显示loading加载提示用户正在请求中的操作在加载完成隐藏loading显示返回的数据。
下面使用vue3 Hooks 来封装这个业务场景 定义 Hooks 有一个潜规则就是要 use 开头
// useLoading.ts
import { ref } from vue
export const useLoading () {const loading ref(false)const show () {loading.value true}const hide () {loading.value false}return {loading,hide,show}
}
我这里用的elementui框架使用v-loading绑定loading变量
templatediv stylewidth: 300px;height: 300px;border: 1px solid #000 v-loadingloading /divel-button clickshow显示loading/el-buttonel-button clickhide隐藏loading/el-button
/templatescript langts setupimport { useLoading } from /hooks/useLoading.tsconst { loading,hide,show} useLoading()
/script使用Hooks是为了让项目整体的开发代码质量更加高开发功能更加便捷效率更高
