文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中的customRef函数如何使用

2023-07-05 22:53

关注

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

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

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

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

而非直接从商城里购买,用一些现成的零部件组装一个类似精装的电脑,甚至还可以进行拓展,在实现一个定制化复杂的功能需求时,这个自定义ref就很有用。

示例-延迟显示

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

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

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

<template>    <input type="text" v-model="keyword" />    <h4>{{keyword}}</h4></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" />    <h4>{{keyword}}</h4></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去重新解析模板,更新页面数据

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

关于“Vue中的customRef函数如何使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue中的customRef函数如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯