大家好，我们今天来聊一聊如何在 vue 中处理窗口大小调整事件，要在 Vue 中处理窗口大小调整事件，我们有以下几个选择。

添加监听事件

当 Vue 加载组件时，您可以使用 addEventListener() 为窗口调整大小事件注册一个事件监听器。您还应该在卸载组件时清除监听事件，以下代码是使用监听事件的示例代码：

const app = new Vue({
  data: () => ({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  }),
  mounted() {
    window.addEventListener('resize', this.getDimensions);
  },
  unmounted() {
    window.removeEventListener('resize', this.getDimensions);
  },
  methods: {
    getDimensions() {
      this.width = document.documentElement.clientWidth;
      this.height = document.documentElement.clientHeight;
    }
  }
})

<div id="app2">
  <p>The window width and height are respectively {{width}}, {{height}}</p>
</div>

以上方法的缺点是任何需要监听resize事件的组件都需要注册全局事件。但如果多个组件需要监听 resize 事件，可能会变得混乱。指令是一种替代方法，它使多个组件无需访问窗口即可侦听调整大小事件。

Vue.directive('resize', {
  inserted: function(el, binding) {
    const onResizeCallback = binding.value;
    window.addEventListener('resize', () => {
      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      onResizeCallback({ width, height });
    })
  }
});

const app = new Vue({
  data: {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  },
  methods: {
    setDimensions: function({ width, height }) {
      this.width = width;
      this.height = height;
    }
  },
  template: `
    <div id="app">
      <div v-resize="setDimensions">
        <p>the width and height are respectively {{width}}, {{height}} </p>
      </div>
    </div>
  `
});

以下是在 HTML 模板里的指令调用

<div id="app">
  <div v-resize="setDimensions">
    <p>The window width and height are respectively {{width}}, {{height}} </p>
  </div>
</div>

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载