Vue防抖与节流

介绍

在我们使用监听事件的时候，比如用户输入，滚动，调整窗口大小都需要采取预防措施，这些事件可能频繁的触发，比如1s钟执行多次，如果每次都对这些事件响应去执行方法，显然是不太合理的。

所以，这里就需要使用vue的防抖与节流方法。

原理很简单，就是让监听事件的方法，每1s钟响应并执行一次，或者每n秒钟响应并执行一次。

这里使用vue的lodash库举例。

安装

# npm方法
$ npm install lodash --save
# yarn方法
$ yarn add lodash 

使用npm装如图所示：

watch方式

使用步骤

1. 在create()方法中创建一个回调函数this.debouncedWatch = debounce(..., 500)。
2. 在watch()监听方法中使用刚才创建的函数this.debouncedWatch。
3. beforeUnmount()方法中调用this.debouncedWatch.cancel()取消。

例子

<template>
  <div>
    <p id="intro">vue 使用lodash.debounce防抖：</p>
    输入搜索：<input v-model="searchWords" type="text" />
    <p>{{ searchWords }}</p>

  </div>
</template>

<script>
import debounce from "lodash.debounce";

export default {
  name: "HomeIndex.vue",
  data() {
    return {
      searchWords: "",
    };
  },
  watch: {
    searchWords(...args) {
      this.debouncedWatch(...args);
    },
  },
  created() {
    this.debouncedWatch = debounce((newValue, oldValue) => {
      console.log('搜索内容:', "老：" + oldValue + "，新：" + newValue);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedWatch.cancel();
  }
}
</script>

<style scoped>

</style>

事件处理方式

上面是使用watch的方法监听，然后再使用抖动方法，vue的lodash库可以直接在组件上面使用事件处理的方式处理抖动。

这种方式使用起来更加的简单。

步骤

1. 在模板标签中使用v-on:input="debouncedHandler" ，处理输入回调
2. 在created() 方法中this.debouncedHandlerdebounced callback debounce(event => {...}, 500)。

例子

<template>
  <div>
    <p id="intro">vue 使用lodash.debounce防抖：</p>
    输入搜索：<input  v-on:input="debouncedHandler" type="text" />
    <p>{{ searchWords }}</p>

  </div>
</template>

<script>
import debounce from "lodash.debounce";

export default {
  name: "HomeIndex.vue",
  data() {
    return {
      searchWords: "",
    };
  },
  created() {
    debouncedHandler: debounce(function(event) {
      console.log('输入内容:', event.target.value);
    }, 500)
  }
}
</script>

<style scoped>

</style>