VueJs中customRef函數怎么使用

這篇文章主要介紹了VueJs中customRef函數怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇VueJs中customRef函數怎么使用文章都會有所收獲，下面我們一起來看看吧。

前言

ref是Vue官方提供的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函數中返回出去，同時,接收一個工廠函數作為參數,這個工廠函數接受track和trigger兩個函數

作為參數,并返回一個帶有get和set方法的對象

一般來說,track()在get()方法中的返回值前進行調用,追蹤一下數據的改變,通知vue最終數據的變化,而trigger()函數則應該在set()函數的末尾調用

通知vue去重新解析模板,更新頁面數據

最后就是實現等待多長時間,稍后顯示,使用一個定時器去實現,解決頻繁誤觸發的問題,常規的解決辦法,先清除定時器,然后在開啟定時器。

關于“VueJs中customRef函數怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“VueJs中customRef函數怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。