vue项目 实现resize

实现 Vue 项目中的窗口或元素尺寸调整（Resize）

监听窗口大小变化

使用 window.addEventListener 监听 resize 事件，在组件挂载时添加监听，销毁时移除监听。以下是一个基础实现：

export default {
  data() {
    return {
      windowWidth: 0,
      windowHeight: 0
    }
  },
  mounted() {
    this.updateWindowSize()
    window.addEventListener('resize', this.updateWindowSize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateWindowSize)
  },
  methods: {
    updateWindowSize() {
      this.windowWidth = window.innerWidth
      this.windowHeight = window.innerHeight
    }
  }
}

使用 ResizeObserver 监听元素尺寸变化

现代浏览器支持 ResizeObserver API，可高效监听特定 DOM 元素的尺寸变化：

export default {
  data() {
    return {
      elementWidth: 0,
      elementHeight: 0,
      resizeObserver: null
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(entries => {
      const entry = entries[0]
      this.elementWidth = entry.contentRect.width
      this.elementHeight = entry.contentRect.height
    })
    this.resizeObserver.observe(this.$el)
  },
  beforeDestroy() {
    this.resizeObserver.disconnect()
  }
}

使用第三方库（如 vue-resize）

安装 vue-resize 库可简化实现：

npm install vue-resize

组件中使用示例：

<template>
  <resize-observer @notify="handleResize" />
</template>

<script>
import { ResizeObserver } from 'vue-resize'

export default {
  components: { ResizeObserver },
  methods: {
    handleResize() {
      console.log('Element size changed')
    }
  }
}
</script>

防抖优化高频触发

对于高频触发的 resize 事件，建议添加防抖处理：

methods: {
  debounceResize: _.debounce(function() {
    console.log('Resize event with debounce')
  }, 200)
}

响应式设计结合 CSS

对于纯布局调整，可优先考虑 CSS 媒体查询：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

注意事项

• 移动端需考虑 orientationchange 事件
• 服务端渲染(SSR)环境下需做兼容处理
• 复杂场景可结合 Vuex 管理全局尺寸状态
• 性能敏感场景建议使用 requestAnimationFrame 优化