vue中监听窗口变化获取高度，并实现防抖和移除监听

需求

监听窗口的变化，获取高度，减掉两头的高度后赋值给el-table的max-height，实现页面只占一屏，表格内部滚动，为了页面性能添加防抖处理，在跳转到其他页面时，解除窗口变化的监听绑定。

实现效果

代码

data() {
	return{
		fn:null
	}
}
created() {
    this.fn = this.resizeHandler();
    this.$nextTick(() => {
      this.fn();
      window.addEventListener("resize", this.fn);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.fn);
  },
  methods: {
	  resizeHandler() {
	      let timer;
	      return () => {
	        if (timer) {
	          window.clearTimeout(timer);
	        }
	        timer = window.setTimeout(() => {
	        //#order-table在el-table上增加一个id="order-table"
	          this.tableMaxHeight = window.innerHeight -
            document.querySelector("#order-table").offsetTop -
            150;
	        }, 100);
	      };
    	},
  }