Vue での CustomRef 関数の使用方法を説明する例-Vue.js-php.cn

Vue での CustomRef 関数の使用方法を説明する例

青灯夜游

リリース： 2023-04-06 18:31:00

転載

1606 人が閲覧しました

Vue で CustomRef 関数を使用するにはどうすればよいですか? VueJsでのcustomRef関数の使い方は次の記事で紹介していますので、お役に立てれば幸いです。

Vue での CustomRef 関数の使用方法を説明する例

ref は、Vue によって正式に提供されている componsion 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 &#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>{{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 という 2 つの関数

をパラメータとして受け取ります。 get メソッドと set メソッドを使用してオブジェクトを返す

一般的に、

track()get() メソッドの戻り値の前に呼び出し、データの変更を追跡し、最終的なデータ変更を vue に通知し、trigger() 関数を呼び出します。その後、# の最後で notificationvue

を呼び出す必要があります。 ##set()

テンプレートを再解析してページデータを更新する関数最後のステップは、どれくらいの時間を待つかを認識することです。時間は後で表示されます。タイマーを使用して実装します。頻繁に誤ったトリガーが発生する問題を解決します。従来の解決策は、まずタイマーをクリアしてからタイマーをオンにすることです。

概要