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函數的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
