Contoh untuk menerangkan cara menggunakan fungsi customRef dalam Vue

Bagaimana untuk menggunakan fungsi customRef dalam Vue? Artikel berikut akan menunjukkan kepada anda cara menggunakan fungsi customRef dalam VueJs saya harap ia akan membantu anda!

ref disediakan secara rasmi oleh Vuecomponsition API, fungsi yang menukar data tidak responsif kepada data responsif Mengenai cara data asas dikumpulkan Dengan responsif

pengguna tidak perlu memberi perhatian, ia adalah bersamaan dengan komputer kulit keras Namun, kadangkala, untuk beberapa keperluan yang kompleks dan khas, kita perlu membina roda sendiri dan melaksanakan struktur dalaman secara manual dan asli.

Semasa melaksanakan fungsi asas, perluasan tambahan juga diperlukan. Kemudian anda perlu menyesuaikan ref pada masa ini Ia bersamaan dengan komputer yang dipasangkan perlu dipasang dan dilaksanakan sendiri.

Daripada membeli terus dari pusat membeli-belah, gunakan beberapa bahagian siap untuk memasang komputer seperti kulit keras, malah ia boleh dikembangkan Apabila menyedari keperluan fungsi yang tersuai dan kompleks, penyesuaian iniref Ia adalah sangat berguna. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Paparan tertunda contoh

Ingin melaksanakan data dalam input Untuk pengumpulan masa nyata dan paparan masa nyata, anda perlu menggunakan perintah 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>

Kini anda tidak boleh menggunakan fungsi ref yang disediakan secara rasmi, iaitu anda perlu mencipta fungsi ref yang serupa, seperti yang ditunjukkan di bawah

<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>

Menggunakan kaedah di atas, anda boleh mengumpul dan memaparkan data tersuai Jika anda ingin menunggu selama beberapa saat sebelum mencetuskan, anda hanya perlu menambah pemasa untuk set Lain Tidak Berubah

set(newValue) {
    setTimeout(() => {
        value = newValue;
        trigger(); // 通知vue去重新解析模板
    },500)
}

Selesaikan masalah gema berterusan, cetusan palsu dan masalah pemasa sentiasa didayakan

<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>

Apa yang lebih sukar untuk memahami tentang inicustomRef ialah ia perlu secara automatik Kembali daripada fungsi ref yang ditakrifkan, dan pada masa yang sama, terima fungsi kilang sebagai parameter Fungsi kilang ini menerima dua fungsi tracktrigger sebagai parameter,

dan

, dan mengembalikan fungsi dengan kaedah get dan set

Secara umumnya, track() dipanggil sebelum nilai pulangan dalam kaedah get() untuk menjejaki perubahan data. dan maklumkan vue tentang perubahan data akhir, manakala fungsi trigger() hendaklah Pada penghujung fungsi set(), panggil pemberitahuan

vue untuk menghuraikan semula templat dan mengemas kini halaman data

Langkah terakhir adalah untuk menyedari berapa lama menunggu, yang akan dipaparkan kemudian Gunakan pemasa untuk mencapai ini, untuk menyelesaikan masalah pencetus palsu yang kerap, penyelesaian konvensional adalah untuk mengosongkan pemasa terlebih dahulu. dan kemudian hidupkan pemasa

Ringkasan

Fungsi ref(customRef()) tersuai adalah perkara yang sangat berguna, jadi untuk pengembangan fungsi ref, saya melaksanakannya secara manual pelaksanaan dalaman agak berbelit-belit, dan saya perlu mengalami dan mempraktikkannya sendiri

(perkongsian video pembelajaran: tutorial pengenalan vuejs, Video Pengaturcaraan Asas)

Atas ialah kandungan terperinci Contoh untuk menerangkan cara menggunakan fungsi customRef dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!