Vue3 响应式高阶用法之customRef()的使用

 更新时间:2024年09月24日 09:42:21   作者:訾博ZiBo  
customRef()是Vue3的高级工具,允许开发者创建具有复杂依赖跟踪和自定义更新逻辑的ref对象,本文详细介绍了customRef()的使用场景、基本用法、功能详解以及最佳实践,包括防抖、异步更新等用例,旨在帮助开发者更好地理解和使用这一强大功能

一、简介

在 Vue3 中,响应式系统是其核心特性之一。customRef() 是 Vue3 提供的一种高级工具,允许开发者创建自定义的 ref 对象。这些对象可以包含更复杂的依赖跟踪和更新逻辑,满足特定的业务需求。本文将详细介绍 customRef() 的使用场景、基本用法以及一些最佳实践。

二、使用场景

customRef() 适用于以下场景:

  • 复杂的依赖跟踪:需要对依赖关系进行精细控制。
  • 自定义更新逻辑:需要在更新值时执行特定逻辑,如防抖、节流等。
  • 异步操作:需要在异步操作完成后更新值。

三、基本使用

3.1 customRef() 的基本概念

customRef() 接收一个工厂函数,该函数返回一个包含 get 和 set 方法的对象。这些方法用于读取和修改引用值,并且可以在内部显式地控制依赖关系的跟踪和响应式更新。

3.2 代码示例

以下是一个实现防抖功能的 ref 示例:

<script lang="ts" setup>
import { customRef } from 'vue';

function debouncedRef(initialValue, delay) {
  let timeoutId;
  return customRef((track, trigger) => ({
    get() {
      // 使用 track 函数标记依赖
      track();
      return initialValue;
    },
    set(newValue) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        initialValue = newValue;
        // 使用 trigger 函数触发依赖更新
        trigger();
      }, delay);
    }
  }));
}

// 使用自定义的ref
const myDebouncedRef = debouncedRef('Hello World', 500);
</script>

在上述例子中,debouncedRef 是一个自定义的 ref 工厂函数,它接收两个参数:初始值和延迟时间。当 set 方法被调用时,会清除之前的计时器并设置一个新的计时器,在延迟时间结束后更新值并触发依赖更新。

四、功能详解

4.1 防抖功能详解

防抖(Debounce)是一种在指定时间内忽略多次触发,只在最后一次触发后的一段时间内执行的技术。上面的 debouncedRef 实现了这一功能,当我们频繁更新 ref 的值时,只有在最后一次更新后的延迟时间结束后,值才会被真正更新。

4.2 关键函数 track 和 trigger

  • track:用于标记依赖,告诉 Vue 这个 ref 的值被读取了。
  • trigger:用于触发依赖更新,告诉 Vue 这个 ref 的值被修改了。

五、最佳实践及案例

5.1 异步更新

以下是一个异步更新 ref 的示例:

<script lang="ts" setup>
import { customRef } from 'vue';

function asyncRef(initialValue, asyncFunction) {
  return customRef((track, trigger) => ({
    get() {
      track();
      return initialValue;
    },
    async set(newValue) {
      initialValue = await asyncFunction(newValue);
      trigger();
    }
  }));
}

// 使用自定义的ref
const myAsyncRef = asyncRef('Initial Value', async (value) => {
  // 模拟异步操作
  await new Promise(resolve => setTimeout(resolve, 1000));
  return value.toUpperCase();
});
</script>

在这个示例中,asyncRef 接收一个初始值和一个异步函数。当 set 方法被调用时,会执行异步函数并在完成后更新值。

5.2 条件性更新

<script lang="ts" setup>
import { customRef } from 'vue';

function conditionalRef(initialValue, conditionFunction) {
  return customRef((track, trigger) => ({
    get() {
      track();
      return initialValue;
    },
    set(newValue) {
      if (conditionFunction(newValue)) {
        initialValue = newValue;
        trigger();
      }
    }
  }));
}

// 使用自定义的ref
const myConditionalRef = conditionalRef(0, value => value >= 0);
</script>

在这个示例中,conditionalRef 只有在满足特定条件时才会更新值。

六、总结

customRef() 是 Vue3 中一个非常强大的工具,允许开发者根据自己的需求创建自定义的 ref 对象。通过合理使用 customRef(),我们可以实现防抖、节流、异步更新等复杂的响应式逻辑,从而提高代码的灵活性和可维护性。

到此这篇关于Vue3 响应式高阶用法之customRef()的使用的文章就介绍到这了,更多相关Vue3 customRef()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • elementUI弹窗里的表单重置不生效问题解决

    elementUI弹窗里的表单重置不生效问题解决

    本文主要介绍了elementUI弹窗里的表单重置不生效问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue跨窗口通信之新窗口调用父窗口方法实例

    vue跨窗口通信之新窗口调用父窗口方法实例

    由于开发需要,我需要在登录成功请求成功后,调用父窗口的一个点击事件方法,这篇文章主要给大家介绍了关于vue跨窗口通信之新窗口调用父窗口的相关资料,需要的朋友可以参考下
    2023-01-01
  • 关于Element-UI中slot的用法及说明

    关于Element-UI中slot的用法及说明

    这篇文章主要介绍了关于Element-UI中slot的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • VUE Elemen-ui之穿梭框使用方法详解

    VUE Elemen-ui之穿梭框使用方法详解

    这篇文章主要为大家详细介绍了VUE Elemen-ui之穿梭框使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue 实现滑动块解锁示例详解

    vue 实现滑动块解锁示例详解

    这篇文章主要为大家介绍了vue 实现滑动块解锁示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 搭建Vue3+Vite+Ts脚手架的示例代码

    搭建Vue3+Vite+Ts脚手架的示例代码

    本文介绍了Vue3+Vite+Ts搭建脚手架的实现,步骤包括创建项目、选择技术栈、安装依赖及运行项目,旨在为开发者提供一个简易快速的搭建流程,感兴趣的可以了解一下
    2024-11-11
  • vue自定义switch开关组件,实现样式可自行更改

    vue自定义switch开关组件,实现样式可自行更改

    今天小编就为大家分享一篇vue自定义switch开关组件,实现样式可自行更改,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vuex实现记事本功能

    Vuex实现记事本功能

    这篇文章主要为大家详细介绍了Vuex实现记事本功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 在Vue3项目中使用Vuex进行状态管理的详细教程

    在Vue3项目中使用Vuex进行状态管理的详细教程

    在 Vue 3 中使用 Vuex 进行状态管理是一个很好的实践,特别是在涉及到多个组件间共享状态的情况,下面是如何在 Vue 3 项目中设置和使用 Vuex 的教程,包括 state, mutations, actions, getters 的概念及其用途,需要的朋友可以参考下
    2024-09-09
  • vue 按钮 权限控制介绍

    vue 按钮 权限控制介绍

    这篇文章主要介绍了vue 按钮 权限控制,在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限,必须当有删除权限时,就显示删除按钮,下面我们就来了解一下具体的解决方法,需要的朋友也可以参考一下
    2021-12-12

最新评论