vue-学习知识点总结（三）window.onresize

window.onresize 事件

当浏览器被重置大小时执行，onresize 事件会在窗口或框架被调整大小时发生。

1、window.onresize事件一般放在created或者mounted生命周期中，这样界面改变是能触发。

2、window.onresize中的this指向的是window，不是指向vue，

如果需要调用methods中的函数，需要在window.onresize事件的前面把指向vue的this赋值给其他字符，比如"_this"。

3、由于window.onresize是全局事件，在其他页面改变界面时也会执行，

这样可能会出现问题，需要在出这个界面时注销window.onresize事件。

4、window.onresize说明一个问题：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated中的会触发浏览器事件需要在destroyed、beforeDestory中销毁掉。

5、示例

mounted() {
    this.$nextTick(() => {
      const self = this
      let pageHeight = 0
      self.tableHeight = window.innerHeight - self.$refs.tableList.$el.offsetTop - 64 - 240 - pageHeight
      // 监听窗口大小变化
      window.onresize = function() {
        if (self.total > self.listQuery.limit) {
          pageHeight = 56
        }
        self.tableHeight = window.innerHeight - self.$refs.tableList.$el.offsetTop - 64 - 240 - pageHeight
      }
    })
  },beforeDestroy() {
    // 注销window.onresize事件，全局事件，需要在这里注销掉，防止污染其他页面
    window.onresize = null
  },
// 其他代码