Vue 2 realizes the CustomRef method to prevent shock throttling

Preface

Today I bring you the article "CustomRef" method of anti-shake/throttling" in Vue 2. I used it a few days agocustomRefA new way to achieve the ultimate anti-shake/throttling in vue 3. Interested friends can click 👉Extreme anti-shake/throttling in Vue 3 (including common anti-shake/throttling)Check it out.

During the front-end development process, it basically needs to be processed when interacting with users. The conventional operation is to add anti-shake or throttling at the corresponding position.

In addition, the effects of anti-shake or throttling are: one is to prevent users from operating frequently; the other is to save certain server resources and reduce resource waste.

background

What is the reason for writing this article? I've finished writingExtreme anti-shake/throttling in Vue 3 (including common anti-shake/throttling)After this article, a question suddenly arose, thinking that sincevue 3Can be passedcustomRefRealize, thatvue 2Can we also copy it like this? Then I thought about it, it was OK, and then I wrote it out even though I didn't have any time tonight.vue 3It's so good, but it's still very useful. So here to share it.

Someone saidvue 2withoutrefandcustomRefah?

Oh, don't forget thereproxyandah.

The way I implement it here isproxy, then achieve the effect andcustomRefAlmost, just intemplateThere will be one in the templatevalueCan't be removed.

Let's get started!

Get the code

I will put the code here directly, and I have commented on each line of code for easy reading. Of course, if you have any questions or don’t understand, you can comment + private messages.

Anti-shake (debounce)

Code

// Statement// data is data// delay is time.  delay = null, then do not use anti-shake solution directlyfunction debounceRef (data, delay = 300) {
    // Timer    let timer = null
    // data    const value = {value: data}
    // Create a proxy instance    const proxy = new Proxy(value, {
        get(target, property) {
            // Return the current value            return target[property]
        },
        // set parameter description        // target: target, property: property, newValue value, receiver: receiver        set(target, property, newValue, receiver) {
            // Timer judgment, if there is, clear the current timer            if(timer != null){
                // Clear the timer                clearTimeout(timer)
                //Restore timer to default value                timer = null
            }
            // Assign values and create timers            timer = setTimeout(() =&gt; {
                // Modify the value                target[property] = newValue
            }, delay)
            // Let set return true            // If true is not returned, the following error will be reported: 'set' on proxy: trap returned false for property 'value'            return true;
        }
    })
    //Judge delay === null, which is equal to return an unproxy object, otherwise    return delay === null ?value : proxy
}

use

// Introduceimport debounceRef from "./utils/"
// Createdata () {
  return {
      count: debounceRef(0, 300)
  }
}

Use in the page:

// span
<span>{{  }}</span>
// v-model
<input type="text" v-model="">

Use in functions:

// FunctionaddCount () {
     += 1            
}

Throttle

Code

// Statement// data is data// delay is time.  delay = null will not use the throttling solution directlyfunction throttleRef (data, delay = 300) {
    // Timer    let timer = null
    // data    const value = {value: data}
    // Create a proxy instance    const proxy = new Proxy(value, {
        get(target, property) {
            // Return the current value            return target[property]
        },
        // set parameter description        // target: target, property: property, newValue value, receiver: receiver        set(target, property, newValue, receiver) {
             // Timer judgment            if(timer === null){
                // Assign values and create timers                timer = setTimeout(() =&gt; {
                    // Modify the value                    target[property] = newValue
                    // Clear the timer                    clearTimeout(timer)
                    //Restore timer to default value                    timer = null
                }, delay)
            }
            // Let set return true            // If true is not returned, the following error will be reported: 'set' on proxy: trap returned false for property 'value'            return true;
        }
    })
    //Judge delay === null, which is equal to return an unproxy object, otherwise    return delay === null ?value : proxy
}

use

// Introduceimport throttleRef from "./utils/"
// Createdata () {
  return {
      count: throttleRef(0, 300)
  }
}

Use in the page:

// span
<span>{{  }}</span>
// v-model
<input type="text" v-model="">

Use in functions:

// FunctionaddCount () {
     += 1            
}

Summarize

The above is the entire content of this article in Vue 2's implementation of CustomRef method to prevent shadowing/throttling. byExtreme anti-shake/throttling in Vue 3 (including common anti-shake/throttling)UtilizationcustomRefinspiration.

The above is the detailed content of implementing the CustomRef anti-shake throttling method in Vue 2. For more information about Vue 2 CustomRef anti-shake throttling, please pay attention to my other related articles!