Vue中全局使用Lodash的Debounce防抖函数、Throttle节流函数及其他

之前的项目中,虽然从没有用过Lodash,但也是久仰大名。现在的项目中,希望能够进行实时查询,所以Debounce防抖和Throttle节流函数就必不可少了。

之前并没有用过防抖和节流,但是之前看过掘金的一些文章,而且由于之前有游戏开发经验,所以对于这种逻辑还是非常熟悉的,只是JS中的我们是使用闭包来解决这个问题。代码其实很简单,这里不再贴出代码。这篇文章我们主要还是解决Vue中使用Lodash的问题。

如果是JS代码的话,解决的方法比较多,但是TS的话,会有一些定义问题。

一、使用VuePlugin方式

Vue的插件写起来是很容易,使用Lodash的大部分函数也很方便,但是有一个问题,就是无法使用_.debounce_.throttle函数,因为我们使用的时候使用的是this._这种方式,但是在methods中,我们无法直接使用this的方法来进行赋值,代码如下:

// Vue插件代码
import _Vue from "vue";
import * as lodash from "lodash";
function install(Vue: typeof _Vue, options?: any): void {
    Vue._ = lodash;
    Vue.prototype._ = lodash;
}
export default install;

// 在created中定义的方法,可以用作event,JS中可直接使用,TS中也可以使用,但由于无法对this进行定义,所以会有波浪线
created() {
    this.test = this._.debounce(function(){},1000);
}

// 在这种methods方式下可以用使用lodash的一些方法
methods: {
    test() {
        let _d = this._.debounce(function(){},1000);
    }
}
// global.d.ts
import Vue from "vue";
import * as lodash from "lodash";

declare module "vue/types/vue" {
    // Vue.prototype._
    interface Vue {
        _: lodash.LoDashStatic;
    }
    // Vue._
    interface VueConstructor<V extends Vue = Vue> {
        _: typeof lodash.LoDashStatic;
    }
}

二、使用WebpackProvidePlugin来进行

ProvidePluginWebpack用来自动加载模块的方法,之所以会研究全局使用方式的问题,就是因为我懒得每个vue组件中都import lodash

// webpack的配置,在VUE-CLI 3中,我们写在vue.config.js中
plugins: [
    new webpack.ProvidePlugin({
        _: "lodash"
    })
]
// vue组件中
methods: {
    delay_search: _.debounce(function(this: any) {
        this.other_function();
    }, 500),
}
// global.d.ts
import * as lodash from "lodash";
declare global {
    const _: lodash.LoDashStatic;
}