Vue 3 的 customRef API 允许创建自定义 ref，提供对依赖项跟踪和更新的显式控制。它可以用于实现防抖、节流、自定义计算属性及性能优化。customRef 与 ref 的主要区别在于定制化程度，ref 更适合常规场景，而 customRef 提供更细粒度的控制。customRef 应用场景包括在获取和设置值时执行额外操作，例如与本地存储交互或实现防抖功能。本文利用customRef实现全局loading效果

customRef

customRef() 是 Vue 3 中新增的 API，用于创建自定义 ref，并对其依赖项跟踪和更新触发进行显式控制。

用途:

• 实现防抖/节流：通过控制依赖项收集和更新触发时机，可以实现防抖/节流功能。
• 自定义计算属性：可以根据特定逻辑计算值，并控制何时更新视图。
• 优化性能：可以避免不必要的更新，提升性能。

工作原理

customRef() 接收一个工厂函数作为参数，该函数接收 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

• track：用于收集依赖项。在 get 方法中调用，收集该 ref 所依赖的响应式数据。
• trigger：用于触发更新。在 set 方法中调用，通知依赖项更新视图。

const count = customRef((track, trigger) => {
  let num = 0;

  return {
    get: () => num,
    set: (val) => {
      num = val;
      trigger();
    },
  };
});

const update = () => {
  count.value++;
};

解释

• track 和 trigger 函数分别用于收集依赖项和触发更新。
• get 方法返回当前值。
• set 方法更新值并触发更新。

gloadingRef

import { customRef } from 'vue';
 export const gloadingRef = () => {
    return customRef((track, trigger) => {
        let loadingCount = 0;
        return {
            get: () => {
                track()
                return loadingCount > 0
            },
            set: (val) => {
                loadingCount += val ? 1 : -1;
                loadingCount = Math.max(0,loadingCount)
                trigger();
            },
        };
    })
}

使用

// element-ui这样写 import PopupManager from 'element-ui/lib/utils/popup/popup-manager.js'
// PopupManager 统一处理遮罩层的z-index,防止Message,Dialog层级乱序
import PopupManager from '@element-plus/utils/popup-manager'
<div v-loading="true" class="ploading" v-if="initConfig.gloading.value" :style="loadStyle"></div>

const gloading = gloadingRef()

const loadStyle = reactive({
      zIndex: 1000,
})

watch(() => gloading.value,
      (val) => {
       if(val){
         loadStyle.zIndex = PopupManager.nextZIndex()
       }
      },{immediate:true})

const getApi = () => {
    gloading.value = true
    
    setTimeout(() => {
    gloading.value = false
    },100)
}

gloadingRef建议在axios里使用

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 1000 * 60 * 5
})
// request拦截器
service.interceptors.request.use(config => {
  gloading.value = true
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  gloading.value = false
  return res
  },
  error => {
    
    Message({ message: message, type: 'error', duration: 5 * 1000 })
    return Promise.reject(error)
  }
)