vue中如何使用customref函数？下面本篇文章就来带大家了解一下vuejs中customref函数的使用方法，希望对大家有所帮助！
ref是vue官方提供的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函数中返回出去，同时,接收一个工厂函数作为参数,这个工厂函数接受track和trigger两个函数
作为参数,并返回一个带有get和set方法的对象
一般来说,track()在get()方法中的返回值前进行调用,追踪一下数据的改变,通知vue最终数据的变化,而trigger()函数则应该在set()函数的末尾调用
通知vue去重新解析模板,更新页面数据
最后就是实现等待多长时间,稍后显示,使用一个定时器去实现,解决频繁误触发的问题,常规的解决办法,先清除定时器,然后在开启定时器
总结自定义ref(customref())函数是一个非常有用的东西,相当于是对ref的一个功能的拓展,自己手动的去实现,内部实现比较绕,需要自己去体会和实践的
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是实例讲解vue中customref函数的使用方法的详细内容。