vue抖动代码示例

在Vue中实现“抖动”（防抖或节流）功能，通常是为了限制某些函数的执行频率，比如输入框的搜索建议、窗口的resize事件等。虽然lodash库提供了防抖（_.debounce）和节流（_.throttle）函数，但直接在Vue组件中使用它们，需要结合Vue的生命周期钩子或计算属性（虽然计算属性主要用于响应式依赖，但防抖和节流更多地与方法和事件处理关联）。

以下是一个Vue组件中使用lodash防抖函数的示例。这个示例将展示如何对输入框的input事件进行防抖处理，以限制搜索建议请求的频率。

首先，确保你的项目中已经安装了lodash。如果没有，你可以通过npm或yarn来安装它：

npm install lodash --save # 或者 yarn add lodash

然后，在Vue组件中，你可以这样使用_.debounce：

<template>  
  <div>  
    <input v-model="query" @input="debouncedSearch">  
    <!-- 搜索结果显示区域，这里仅作为示例 -->  
    <div v-if="searchResults.length">  
      <ul>  
        <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>  
      </ul>  
    </div>  
  </div>  
</template>  
  
<script>  
import _ from 'lodash';  
  
export default {  
  data() {  
    return {  
      query: '',  
      searchResults: [],  
      // 创建一个防抖函数，等待300毫秒后执行  
      debouncedSearch: _.debounce(this.search, 300)  
    };  
  },  
  methods: {  
    // 模拟搜索方法  
    search() {  
      // 这里应该是调用API进行搜索的逻辑  
      // 为了演示，我们简单地将查询结果设置为一个静态数组  
      this.searchResults = [  
        { id: 1, name: this.query + ' Result 1' },  
        { id: 2, name: this.query + ' Result 2' },  
        // ...  
      ];  
    }  
  },  
  beforeDestroy() {  
    // 组件销毁前取消防抖函数，以防内存泄漏  
    if (this.debouncedSearch) {  
      this.debouncedSearch.cancel();  
    }  
  }  
};  
</script>

注意：在Vue组件的data函数中直接定义debouncedSearch可能不会按预期工作，因为this在data函数中可能不是指向Vue实例的。一种更常见的做法是在created或mounted生命周期钩子中定义防抖函数，并将其赋值给一个data属性或组件的methods属性。然而，由于Vue的响应式系统，你可能需要将防抖函数定义在methods中，并在需要的地方通过箭头函数或.bind(this)来确保this的正确性，或者将防抖函数存储在组件的实例属性上。

上面的示例为了简洁性直接在data中定义了防抖函数，但在实际应用中可能需要调整。

另外，如果你希望在组件销毁时取消防抖函数（以避免可能的内存泄漏），如示例中beforeDestroy生命周期钩子所示，确保在组件销毁前调用防抖函数的cancel方法。但是，请注意，直接在data中定义的防抖函数可能不会在beforeDestroy中正确取消，因为它可能已经被Vue的响应式系统替换为了一个getter/setter对。因此，更稳妥的做法是将防抖函数存储在组件的实例属性上，如通过this.$options.methods.methodName.bind(this)来引用，但这在Vue 3的Composition API中并不适用，且通常不是推荐的做法。在Vue 3中，你可能会使用Composition API的ref和onMounted/onBeforeUnmount等钩子来实现类似的功能。