vue uses several methods to implement debounce (anti-shake function) in lodash

1. Installation

npm i --save

2. Introduce

import debounce from ''

3. Use

&lt;van-search v-model="searchValue" placeholder="Enter name or work number" @input='handleInput' /&gt;

The first type:

handleInput: debounce(function (val) {
  (val)
}, 200)

The second type:

handleInput(val) {
	(val)
}
created() {
	 = debounce(, 200) // Search box anti-shake}

Both of these methods of use are the same

Observer anti-shake:

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
import debounce from "";
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(...args) {
      (...args);
    },
  },
  created() {
     = debounce((newValue, oldValue) => {
      ('New value:', newValue);
    }, 500);
  },
  beforeUnmount() {
    ();
  },
};
</script>

Event processor anti-shake:

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "";
export default {
  created() {
     = debounce(event => {
      ('New value:', );
    }, 500);
  },
  beforeUnmount() {
    ();
  }
};
</script>

Why not write a good method in the method and call it directly in the template, like this

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "";
export default {
  methods: {
    // Don't do this!
    debouncedHandler: debounce(function(event) {
      ('New value:', );
    }, 500)
  }
};
</script>

Components use the options object, including methods, exported by export default { … }, and will be reused by component instances.

If there are more than 2 component instances on the web page, all components will apply the same anti-shake function - which will cause anti-shake failure.

This is the article about vue using several methods to implement debounce (anti-shake function) in lodash. For more related vue debounce anti-shake content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!