Window的resize事件及反抖函数应用

应用场景：在Vue工程中，添加样式，部分需要做到自适应，需要添加resize事件。（浏览器的窗口发生改变时，才会触发resize函数）

由于是单页面应用，如果组件初始化的时候绑定事件，在切换页面的时候不去注销事件，如果来回切换，会让resize事件执行多个函数，迅速消耗CPU,浏览器会出现卡顿的情况，所以一般在mounted函数中添加 resize事件，destroy 函数中删除 resize事件。

知识储备：浏览器中显示的元素高度——clientHeight；浏览器中显示的元素高度+滚动条的高度——offsetHeight；元素本身高度——scrollHeight；窗口的文档显示区的高度——innerheight 。

举例：根据窗口文档的高度判断显示的滚动条个数

    mounted() {

        this.setAppearBar();

        this.debounceAppearBarFunc = _.debounce(this.setAppearBar, 100);

        window.addEventListener('resize', this.debounceAppearBarFunc);

    },

    beforeDestroy() {

        window.removeEventListener('resize', this.debounceAppearBarFunc);

    },

   methods: {

       setAppearBar() {

            const innerWidth = window.innerWidth;

            if (innerWidth <= 1366) {

                this.appearNavBar = 3;

            } else if (innerWidth <= 1680) {

                this.appearNavBar = 4;

            } else {

                this.appearNavBar = 5;

            }

        },

}

为了防止window.innerWidth的值不断变化，因此针对setAppearBar方法添加了反抖函数，该函数会从上一次被调用后，延迟 100毫秒后调用 setAppearBar方法。

注意：_debounce函数的第一个参数是一个函数名，而_.debounce(this.setAppearBar, 100)返回的结果this.debounceAppearBarFunc也只是一个函数，window.addEventListener('resize', this.debounceAppearBarFunc)监听的是这个函数，切勿与函数的调用this.setAppearBar()及this.debounceAppearBarFunc()弄混淆。