Analisis mendalam tentang anti goncang/pendikit muktamad dalam Vue3

Artikel ini membawakan anda anti goncang/pendikit yang muktamad dalam Vue 3 (termasuk kaedah anti goncang/pendikit yang biasa) Artikel ini bukan sahaja menerangkan kaedah anti goncang atau pendikit yang asal kaedah pembungkusan, yang lebih mudah dan lebih jelas untuk digunakan.

Dalam proses pembangunan bahagian hadapan, apabila ia melibatkan interaksi dengan pengguna, ia pada asasnya perlu diproses Operasi biasa ialah menambah anti goncang pada kedudukan yang sepadan.

Tambah fungsi anti goncang atau pendikit: pertama, untuk menghalang pengguna daripada kerap beroperasi kedua, untuk menjimatkan sumber pelayan tertentu dan mengurangkan pembaziran sumber.

Prinsip anti goncang atau pendikit

---

Anti goncang (debounce)

Jika pengguna kerap beroperasi beberapa kali, kali terakhir akan diguna pakai Sudah tentu, kali pertama juga boleh digunakan sebagai asas untuk kemas kini data atau permintaan sumber rangkaian untuk menghapuskan operasi berlebihan atau mengurangkan jumlah pembaziran tertentu. meminta sumber. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Kod sampel

function debounce (fn, delay = 300){
    let timer = null
    return function (...args) {
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn.call(this, ...args)
        }, delay);
    }
}

Gunakan

debounce(()=> count += 1, 1000)

pendikit

Dalam julat masa tertentu, jika pengguna mencetuskannya beberapa kali, ia akan hanya dilaksanakan sekali Untuk mengelakkan pengguna daripada kerap beroperasi.

Kod Contoh

let timer = null
function throttle (fn, delay = 300) {
    if(timer == null){
        timer = setTimeout(() => {
            fn()

            clearTimeout(timer)
            timer = null
        }, delay);
    }
}

Menggunakan

throttle(()=> count += 1, 1000)

Penerangan Alam Sekitar

---

• vue 3

• jemput

Pakej baharu

---

Di sini saya akan menerangkannya dalam dua modul. Satu adalah anti goncang; yang lain adalah pendikit.

Walaupun perbezaan antara keduanya tidaklah terlalu besar, namun tetap ada perbezaannya. Masuk dalam kereta, kawan-kawan.

Debounce

Mari kita lihat kandungan pakej biasa dahulu.

Pakej biasa-1

Kod

function debounce (fn, delay = 300){
    let timer = null
    return function (...args) {
        if(timer != null){
            clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(()=>{
            fn.call(this, ...args)
        }, delay);
    }
}

Gunakan

const addCount = debounce(()=> count.value += 1, 1000)

Pakej biasa-2

Kod

let timer = null
function debounce (fn, delay = 1000){
    if(timer != null){
        clearTimeout(timer)
        timer = null
    }
    timer = setTimeout(fn, delay)
}

menggunakan

const addCount = () => debounce(()=> count.value += 1, 1000)

pakej baharu

Di sini kita perlu menggunakan vue 3 customRef untuk melaksanakan cara baharu kami. Saya tidak akan menulis secara terperinci di sini. Saya menambah komen terus di atas setiap baris kod. Saya percaya kawan saya anda boleh memahami.

Kod

// 从 vue 中引入 customRef 和 ref
import { customRef, ref } from "vue"

// data 为创建时的数据
// delay 为防抖时间
function debounceRef (data, delay = 300){
    // 创建定时器
    let timer = null;
    // 对 delay 进行判断，如果传递的是 null 则不需要使用 防抖方案，直接返回使用 ref 创建的。
    return delay == null 
        ? 
        // 返回 ref 创建的
        ref(data)
        : 
        // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
        customRef((track, trigger) => {
            return {
                get () {
                    // 收集依赖
                    track()
                    // 返回当前数据的值
                    return data
                },
                set (value) {
                    // 清除定时器
                    if(timer != null){
                        clearTimeout(timer)
                        timer = null
                    }
                    // 创建定时器
                    timer = setTimeout(() => {
                        // 修改数据
                        data = value;
                        // 派发更新
                        trigger()
                    }, delay)
                }
            }
        })
}

Gunakan

// 创建
const count = debounceRef(0, 300)

// 函数中使用
const addCount = () => {
  count.value += 1
}

// v-model 中使用
<input type="text" v-model="count">

pendikit

kami Masih sama, mari kita lihat kandungan pembungkusan biasa dahulu.

Pakej biasa-1

Kod

let timer = null
function throttle (fn, delay = 300) {
    if(timer == null){
        timer = setTimeout(() => {
            fn()

            clearTimeout(timer)
            timer = null
        }, delay);
    }
}

Gunakan

const addCount = () => throttle(()=> count.value += 1, 1000)

Pakej biasa-2

Kod

function throttle (fn, delay = 300) {
    let timer = null
    return function (...args) {
        if(timer == null){
            timer = setTimeout(() => {
                fn.call(this, ...args)
    
                clearTimeout(timer)
                timer = null
            }, delay);
        }
    }
}

Gunakan

const addCount = throttle(()=> count.value += 1, 1000)

Pakej baharu

Pendikit dan anti goncang dalam pakej dan Penggunaannya serupa.

Kod

// data 为创建时的数据
// delay 为节流时间
function throttleRef (data, delay = 300){
    // 创建定时器
    let timer = null;
    // 对 delay 进行判断，如果传递的是 null 则不需要使用 节流方案，直接返回使用 ref 创建的。
    return delay == null 
        ? 
        // 返回 ref 创建的
        ref(data)
        : 
        // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
        customRef((track, trigger) => {
            return {
                get () {
                    // 收集依赖
                    track()
                    // 返回当前数据的值
                    return data
                },
                set (value) {
                    // 判断
                    if(timer == null){
                        // 创建定时器
                        timer = setTimeout(() => {
                            // 修改数据
                            data = value;
                            // 派发更新
                            trigger()
                            // 清除定时器
                            clearTimeout(timer)
                            timer = null
                        }, delay)
                    }
                    
                }
            }
        })
}

Menggunakan

// 创建
const count = debounceRef(0, 300)

// 函数中使用
const addCount = () => {
  count.value += 1
}

// v-model 中使用
<input type="text" v-model="count">

Ringkasan

---

Di atas ialah artikel Vue 3 中的极致防抖/节流（含常见方式防抖/节流） Jika terdapat sebarang kekurangan dalam keseluruhan artikel atau jika anda mempunyai cara yang lebih baik atau cerapan unik lain, sila berasa bebas untuk mengulas + menghantar mesej peribadi.

Tentulah kawan, anda telah belajar trick lain, anda boleh like + follow + komen.

Semoga artikel ini bermanfaat kepada rakan-rakan yang membaca.

Rakan yang ingin tahu cara melaksanakan penyelesaian yang sama dalam vue 2 boleh klik di sini Melaksanakan kaedah CustomRef anti goncang/pendikit dalam Vue 2

(Pembelajaran? perkongsian video :Tutorial pengenalan Vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Analisis mendalam tentang anti goncang/pendikit muktamad dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!