vue中复用组件使用debounce遇到的问题

最新推荐文章于 2024-05-10 17:04:47 发布

汪大月月鸟

最新推荐文章于 2024-05-10 17:04:47 发布

阅读量515

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qwtt24/article/details/128924413

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章讨论了在Vue组件中使用lodash的debounce函数可能会导致的状态共享问题，特别是在组件复用时。解决方案是在组件的created钩子中为每个实例单独创建防抖函数，并在unmounted钩子中清除，以防止不同实例间的影响。

摘要由CSDN通过智能技术生成

正常使用：

import {debounce} from "lodash";
import { fetch } from 'xxxx';

export default {
    // ...
    methods: {
        remoteMethod: debounce(function (value = "") {
            const params = {
                keywords: value,
            };
            fetch(params)
                .then((res) => {
                    // ...
                })
        }, 350, ),
    },
}

这样写的话就会有一个问题：

这种方法对于被重用的组件来说是有问题的，因为这个预置防抖的函数是有状态的：它在运行时维护着一个内部状态。他们共享一个函数，那么它们之间将会互相影响。

那么如何解决这个问题呢？

Vue的文档中也给出了相应的解决方案。

export default {
  created() {
    // 每个实例都有了自己的预置防抖的处理函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 最好是在组件卸载时
    // 清除掉防抖计时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 对点击的响应 ...
    }
  }
 }