用lodash使用防抖节流

Posted 2023-04-08

参考技术A Lodash 是一个一致性、模块化、高性能的 javascript 实用工具库。

cdn： <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>

安装;

$ npm i -g npm

$ npm i --save lodash

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

遍历 array、object 和 string

对值进行操作和检测

创建符合功能的函数

节流

vue 防抖和节流

vue 没有内置支持防抖和节流，但可以使用 Lodash 等库来实现。

如果某个组件仅使用一次，可以在 methods 中直接应用防抖：

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
  Vue.createApp(
    methods: 
      // 用 Lodash 的防抖函数
      click: _.debounce(function() 
        // ... 响应点击 ...
      , 500)
    
  ).mount('#app')
</script>

但是，这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的 created 里添加该防抖函数:

app.component('save-button', 
  created() 
    // 用 Lodash 的防抖函数
    this.debouncedClick = _.debounce(this.click, 500)
  ,
  unmounted() 
    // 移除组件时，取消定时器
    this.debouncedClick.cancel()
  ,
  methods: 
    click() 
      // ... 响应点击 ...
    
  ,
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
)

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系