我的编程空间,编程开发者的网络收藏夹
学习永远不晚

实例讲解Vue中customRef函数的使用方法

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

实例讲解Vue中customRef函数的使用方法

Vue中如何使用customRef函数?下面本篇文章就来带大家了解一下VueJs中customRef函数的使用方法,希望对大家有所帮助!

实例讲解Vue中customRef函数的使用方法

refVue官方提供的componsition API,将一个非响应式数据转变为响应式数据的函数,至于底层怎么实现数据的收集与响应式

使用者无需去关注,相当于就是精装电脑,然而有时候,针对一些复杂特殊的需求,我们需要自己造轮子,自己手动原生的去实现内部结构。

实现基础的功能的同时,还要进行额外的拓展,那么这时候就需要自定义ref了的,它就相当于是组装式的电脑,内部结构需要自己去组装、实现。

而非直接从商城里购买,用一些现成的零部件组装一个类似精装的电脑,甚至还可以进行拓展,在实现一个定制化复杂的功能需求时,这个自定义ref就很有用。【相关推荐:vuejs视频教程、web前端开发】

示例-延迟显示

想要在input中实现一个数据的实时收集与实时展示,需要使用v-model指令

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
 import { ref } from "vue";
 let keyword = ref("itclanCoder"); // Vue官方提供的ref函数,返回一个响应式数据
</script>

现在不能用官方提供的ref函数,也就是自己要自顶一个类似ref函数,如下所示

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
import { customRef } from 'vue';      
// 自定义的一个ref,名为myRef,自定义ref就是一个函数
function myRef(value) {
  // 自定义,自己得写逻辑,customRef必须要传入一个函数,而且函数里面必须要返回一个对象
  return  customRef((track,trigger) => {  // 第一个return 是把自定义的内容返回出去,第二个return 是返回里面的逻辑,返回get,和set
    return {  
        get() {  // 读取数据,这个value是初始化传递过来的数据
            console.log('get',`${value}`);
            track(); // 追踪一下数据的改变,通知vue最终value数据的变化,提前和get沟通一下,让value是有作用的
            return value
        },
        set(newValue) { // 设置数据,新的值,修改数据
           value = newValue;
           trigger(); // customRef函数内接收两个参数,一个是track,另一个就是trigger,通知vue去重新解析模板
        }
    }
  });  
}    
let keyword = myRef("itclanCoder"); // 自己定义一个ref
</script>

通过上面的方式就可实现自定义数据的收集和展示,如果想要等待几秒后,触发,那么只需要在set加一个定时器就够了的,其他不变

set(newValue) {
    setTimeout(() => {
        value = newValue;
        trigger(); // 通知vue去重新解析模板
    },500)
}

解决持续回显,误触发的问题,定时器一直开通的问题

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
import { customRef } from 'vue';      
// 自定义的一个ref,名为myRef,自定义ref就是一个函数
function myRef(value) {
  let timer;  // 开启一个定时器  
  // 自定义,自己得写逻辑,customRef必须要传入一个函数,而且函数里面必须要返回一个对象
  return  customRef((track,trigger) => {  // 第一个return 是把自定义的内容返回出去,第二个return 是返回里面的逻辑,返回get,和set
    return {  
        get() {  // 读取数据,这个value是初始化传递过来的数据
            console.log('get',`${value}`);
            track(); // 追踪一下数据的改变,通知vue最终value数据的变化,提前和get沟通一下,让value是有作用的
            return value
        },
        set(newValue) { // 设置数据,新的值,修改数据
           clearInterval(timer);  // 先清除定时器,在开
           timer = setTimeout(() => {
              value = newValue;
              trigger(); // customRef函数内接收两个参数,一个是track,另一个就是trigger,通知vue去重新解析模板
           },500)
        }
    }
  });  
}    
let keyword = myRef("itclanCoder"); // 自己定义一个ref
</script>

这个customRef比较难以理解的是,它需要在自定义ref函数中返回出去,同时,接收一个工厂函数作为参数,这个工厂函数接受tracktrigger两个函数

作为参数,并返回一个带有get和set方法的对象

一般来说,track()get()方法中的返回值前进行调用,追踪一下数据的改变,通知vue最终数据的变化,而trigger()函数则应该在set()函数的末尾调用

通知vue去重新解析模板,更新页面数据

最后就是实现等待多长时间,稍后显示,使用一个定时器去实现,解决频繁误触发的问题,常规的解决办法,先清除定时器,然后在开启定时器

总结

自定义ref(customRef())函数是一个非常有用的东西,相当于是对ref的一个功能的拓展,自己手动的去实现,内部实现比较绕,需要自己去体会和实践的

(学习视频分享:vuejs入门教程、编程基础视频)

以上就是实例讲解Vue中customRef函数的使用方法的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

实例讲解Vue中customRef函数的使用方法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

实例讲解Vue中customRef函数的使用方法

Vue中如何使用customRef函数?下面本篇文章就来带大家了解一下VueJs中customRef函数的使用方法,希望对大家有所帮助!
2023-05-14

Vue中的customRef函数如何使用

这篇文章主要介绍了Vue中的customRef函数如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的customRef函数如何使用文章都会有所收获,下面我们一起来看看吧。ref是Vue官方提供的c
2023-07-05

实例讲解vue的截取方法

Vue是一种流行的JavaScript框架,它可以帮助您构建快速响应的单页面应用程序。Vue框架提供了许多实用的功能,其中一个非常实用的功能是截取(slice)方法。本文将介绍Vue的截取方法,包括语法,如何使用以及一些实际的示例。## 什么是截取方法?在Vue中,截取方法是指从一个数组或字符串的特定位置开始,截取出一定长度的子数组或子字符串。截取方法可以帮助您轻松地操作和管理
2023-05-14

Oracle中ROW_NUMBER()OVER()函数用法实例讲解

目录1. 说明:2. 原理:3.语法:4.示例一:5. 示例二总结oracle中ROW_NUMBER() OVER()函数用法1. 说明:ROW_NUMBER() OVER() 函数的作用:分组排序2. 原理:row_number(
2023-04-25

实例讲解Android中SQLiteDatabase使用方法

SQLite数据库是android系统内嵌的数据库,小巧强大,能够满足大多数SQL语句的处理工作,而SQLite数据库仅仅是个文件而已。虽然SQLite的有点很多,但并不是如同PC端的mysql般强大,而且android系统中不允许通过JD
2022-06-06

实例讲解gist的使用方法

在程序员的日常工作中,经常需要使用代码托管服务来管理自己的项目。而Github作为最大、最流行、最广泛使用的软件代码托管服务商,相信是大家非常熟悉的。而在 Github 中,精选的 Git 代码片段存储库,就是 gist, 它可以被看做是一
2023-10-22

vue中使用echarts的方法实例详解

这篇文章主要介绍了vue中使用echarts的方法,结合实例形式详细分析了vue中使用echarts的包安装、引入、生命周期函数元素挂载等相关操作技巧与使用注意事项,需要的朋友可以参考下
2023-05-19

MySQL中substr函数使用方法实例详解

目录前言1. SUBSTR 函数简介2. SUBSTR 函数的基本语法3. SUBSTR 函数的使用示例3.1 提取子字符串3.2 从特定位置开始提取3.3 提取特定长度的子字符串3.4 在实际应用中的示例示例 1:从电子邮件地址中提取域名
MySQL中substr函数使用方法实例详解
2024-08-09

Python中 join() 函数的使用示例讲解

Python中有join()和os.path.join()两个函数,这篇文章主要介绍了Python中 join() 函数的使用方法,需要的朋友可以参考下
2023-05-14

pythonwordcloud库实例讲解使用方法

这篇文章主要介绍了pythonwordcloud库实例,词云通过以词语为基本单位,更加直观和艺术地展示文本。wordcloud是优秀的词云展示的python第三方库
2022-12-30

实例讲解Android中ContentProvider组件的使用方法

ContentProvider基本使用 为了在应用程序之间交换数据,android提供了ContentProvider,ContentProvider是不同应用程序之间进行数据交换的标准API,当一个应用程序需要把自己的数据暴露给其他程序使
2022-06-06

linux中alarm函数的实例讲解

linux alarm函数简介 上代码:#include #include #include #include int mai
2022-06-04

实例讲解Python中函数的调用与定义

调用函数:#!/usr/bin/env python3 # -*- coding: utf-8 -*- # 函数调用 >>> abs(100) 100 >>> abs(-110) 110 >>> abs(12.34) 12.3
2022-06-04

实例讲解Python的函数闭包使用中应注意的问题

昨天正当我用十成一阳指功力戳键盘、昏天暗地coding的时候,正好被人问了一个问题,差点没收好功,洪荒之力侧漏震伤桌边的人,废话不多说,先上栗子(精简版,只为说明问题):from functools import wraps from ti
2022-06-04

PHP中number_format()函数的用法讲解

number_format()函数用于格式化数字,并返回格式化后的字符串。语法:number_format(number, decimals, decimalpoint, separator)参数说明:- number:必需,要格式化的数字
2023-08-09

实例讲解Python中sys.argv[]的用法

sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个“外部”很关键,所以那些试图从代码来说明它作用的解释一直没看明白。因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list),也就是说sys.argv其实可以看作是一
2022-06-02

编程热搜

目录