vue 3 实现节流

在Vue 3中实现节流可以使用自定义的`customRef`和`ref`函数。下面是一个示例代码：

// 从 vue 中引入 customRef 和 ref
import { customRef, ref } from "vue"

// data 为创建时的数据
// delay 为节流时间
function throttleRef (data, delay = 300){
  // 创建定时器
  let timer = null;

  // 对 delay 进行判断，如果传递的是 null 则不需要使用节流方案，直接返回使用 ref 创建的。
  return delay == null ? 
    // 返回 ref 创建的
    ref(data) : 
    // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
    customRef((track, trigger) => {
      return {
        get () {
          // 收集依赖
          track()
          // 返回当前数据的值
          return data
        },
        set (value) {
          // 判断
          if(timer == null){
            // 创建定时器
            timer = setTimeout(() => {
              // 修改数据
              data = value;
              // 派发更新
              trigger()
              // 清除定时器
              clearTimeout(timer)
              timer = null
            }, delay)
          }
        }
      }
    })
}

使用`throttleRef`函数可以创建一个节流的响应式数据。例如：

const count = throttleRef(0, 1000)

这样，在一定时间范围内，如果多次修改`count`的值，只会执行一次更新操作，以达到防止频繁操作的目的。
#### 引用[.reference_title]
- *1* *2* *3* [Vue 3 中的极致防抖/节流（含常见方式防抖/节流）](https://blog.csdn.net/qq_41581588/article/details/129612132)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]