vue 防抖和节流

Posted 2022-05-24 前端精髓

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位大咖的思考法则、工作方式、逻辑体系