實例講解Vue中customRef函數的使用方法

Vue中如何使用customRef函數？以下這篇文章就來帶大家了解VueJs中customRef函數的使用方法，希望對大家有幫助！

ref是Vue官方提供的componsition API,將一個非響應式資料轉變為響應式資料的函數,至於底層怎麼實現資料的收集與響應式

使用者無需去關注，相當於就是精裝電腦，然而有時候，針對一些複雜特殊的需求，我們需要自己造輪子，自己手動原生的去實現內部結構。

實現基礎的功能的同時，還要進行額外的拓展，那麼這時候就需要自訂ref了的，它就相當於是組裝式的電腦，內部結構需要自己去組裝、實現。

而非直接從商城裡購買，用一些現成的零件組裝一個類似精裝的電腦，甚至還可以進行拓展，在實現一個定制化複雜的功能需求時，這個自定義 ref就很有用。 【相關推薦：vuejs影片教學、web前端開發】

#範例-延遲顯示

想要在input中實現一個資料的即時收集與即時展示,需要使用v-model指令

<template>
    <input type="text" v-model="keyword" />
    <h3 id="keyword">{{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 id="keyword">{{keyword}}</h3>
</template>
<script setup>
import { customRef } from &#39;vue&#39;;      
// 自定义的一个ref,名为myRef,自定义ref就是一个函数
function myRef(value) {
  // 自定义,自己得写逻辑,customRef必须要传入一个函数,而且函数里面必须要返回一个对象
  return  customRef((track,trigger) => {  // 第一个return 是把自定义的内容返回出去,第二个return 是返回里面的逻辑,返回get,和set
    return {  
        get() {  // 读取数据,这个value是初始化传递过来的数据
            console.log(&#39;get&#39;,`${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 id="keyword">{{keyword}}</h3>
</template>
<script setup>
import { customRef } from &#39;vue&#39;;      
// 自定义的一个ref,名为myRef,自定义ref就是一个函数
function myRef(value) {
  let timer;  // 开启一个定时器  
  // 自定义,自己得写逻辑,customRef必须要传入一个函数,而且函数里面必须要返回一个对象
  return  customRef((track,trigger) => {  // 第一个return 是把自定义的内容返回出去,第二个return 是返回里面的逻辑,返回get,和set
    return {  
        get() {  // 读取数据,这个value是初始化传递过来的数据
            console.log(&#39;get&#39;,`${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中文網其他相關文章！