Vue 项目优化实践-防抖与节流

监听频发的事件,比如用户的输入,窗口调整大小,窗口滚动,点击事件等都等需要预防措施。

这些事件可能会经常发生,例如每秒发生几次,因此在每个事件上调用请求的操作并不是一个明智的选择。

这时我们就需要使用防抖和节流的手段。

防抖监听

我们以监听用户输入的组件为例,看下如何防抖:

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

上述示例使用了lodash中的debounce,当然也可以使用其他库的防抖方法。

  1. 首先,在created生命周期内,防抖回调函数被创建,并赋值给实例this.debouncedWatch = debounce(..., 500)
  2. 然后,在监听输入值变动时,调用实例。
  3. 最后,在beforeUnmount生命周期内,取消实例。

防抖事件

接下来看下怎么样防抖事件的触发:

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

跟防抖监听类似,就不具体分析了。

注意事项

为什么不按照下面的方式进行防抖?

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

如果按照上述写法进行调用,你会发现确实可以生效。但不建议如此。

当一个页面上引入两个或者更多的上述组件实例的时候,所有的组件会使用相同的防抖函数methods.debouncedHandler。因此正确做法是将防抖函数绑定到组件实例上。

总结

最佳实践就是在created的生命周期内,创建防抖或节流的回调,并作为实例属性。

// ...
  created() {
    this.debouncedCallback = debounce((...args) => {
      // The debounced callback
    }, 500);
  },
// ...
免责声明:
1.本站已授权品牌方萌萌线上图书馆运营课程业务,相关图文音视频均归萌萌家所有。
2.本站与萌萌线上图书馆所发布资源仅限用于学习和研究测试使用,不得用于商业或非法用途。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。

火兔教程网 » Vue 项目优化实践-防抖与节流