应用场景：在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()弄混淆。