Responsive Implementation of Window Size Monitoring in Vue.js

Problem Background and Core Challenges

In mobile web application development, monitoring dynamic changes in window size is a common requirement. Particularly in scenarios involving soft keyboard pop-ups, device rotation, or browser window resizing, developers need to obtain the latest window dimension information in real-time. The specific issue raised by users involves how to effectively monitor changes in window.innerHeight and window.innerWidth within the Vue.js framework to implement logic that dynamically controls page element display based on window aspect ratio.

Basic Implementation: Event Listening Mechanism

The most straightforward solution involves adding a resize event listener to the window object. Within the Vue component lifecycle, event handlers need to be registered in the mounted hook and removed in the beforeDestroy (Vue 2) or onBeforeUnmount (Vue 3) hook to prevent memory leaks.

new Vue({
  el: '#app',
  data() {
    return {
      windowHeight: window.innerHeight,
      windowWidth: window.innerWidth
    }
  },

  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    })
  },

  beforeDestroy() { 
    window.removeEventListener('resize', this.onResize); 
  },

  methods: {  
    onResize() {
      this.windowHeight = window.innerHeight;
      this.windowWidth = window.innerWidth;
    }
  }
});

The core advantage of this implementation lies in its simplicity and intuitiveness, making it suitable for most basic scenarios. Using $nextTick ensures that event listeners are added only after DOM updates are complete, avoiding potential race conditions.

Modern Implementation with Composition API

With the widespread adoption of Vue 3, the Composition API offers a more elegant solution. Using compositional functions like ref, onMounted, and onUnmounted, reusable window size monitoring logic can be created.

import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowSize() {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);
  
  const updateSize = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  };
  
  onMounted(() => {
    window.addEventListener('resize', updateSize);
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', updateSize);
  });
  
  return { width, height };
}

When used in components, simply call this function to obtain reactive window dimension data:

const { width, height } = useWindowSize();

Advanced Application: Responsive Breakpoint Detection

Building upon window size monitoring, responsive breakpoint detection functionality can be further implemented. Using computed properties to dynamically determine current device type enables differentiated user experiences across various screen sizes.

import { computed, ref, onMounted, onUnmounted } from "vue";

export const useBreakpoints = () => {
  const windowWidth = ref(window.innerWidth);
  
  const onWidthChange = () => windowWidth.value = window.innerWidth;
  onMounted(() => window.addEventListener('resize', onWidthChange));
  onUnmounted(() => window.removeEventListener('resize', onWidthChange));
  
  const breakpoint = computed(() => {
    if (windowWidth.value < 550) return 'xs';
    if (windowWidth.value >= 550 && windowWidth.value < 1200) return 'md';
    return 'lg';
  });

  return { width: windowWidth, breakpoint };
};

Encapsulation Solution: Custom Directives

For scenarios requiring reusable window size monitoring logic throughout an application, custom Vue directives can be created. This approach provides a declarative API, making code more concise and readable.

app.directive('resize-window', {
  mounted(el, binding) {
    const handleResize = () => {
      binding.value(window.innerWidth, window.innerHeight);
    };
    window.addEventListener('resize', handleResize);
    el._handleResize = handleResize;
    handleResize();
  },
  beforeUnmount(el) {
    window.removeEventListener('resize', el._handleResize);
  }
});

When using custom directives, template code becomes clearer:

<div v-resize-window="handleResize">
  <p>Window Width: {{ windowWidth }}px</p>
  <p>Window Height: {{ windowHeight }}px</p>
</div>

Performance Optimization and Best Practices

In practical applications, frequent resize events may impact performance. The following strategies can be employed for optimization:

• Debouncing: Use lodash.debounce or custom debounce functions to reduce event trigger frequency
• Throttling Control: For scenarios requiring real-time response, use throttle functions to control update frequency
• Singleton Pattern: In large applications, consider using global state management to avoid duplicate listeners
• Conditional Listening: Decide whether to monitor specific dimension changes based on actual needs

import { debounce } from 'lodash';

const debouncedResize = debounce(() => {
  // Handle resize logic
}, 250);

window.addEventListener('resize', debouncedResize);

Special Scenario Handling for Mobile Devices

In mobile web applications, soft keyboard pop-ups and dismissals are common window size change scenarios. Beyond monitoring resize events, additional considerations include:

• Visual Viewport Changes: Soft keyboards may affect only the visual viewport rather than the layout viewport
• Input Field Focus States: Combine focus and blur events for more precise control
• Device Orientation Changes: Handle layout adjustments during landscape and portrait mode switching

Conclusion and Future Outlook

Window size monitoring is a fundamental capability for building responsive Vue.js applications. From simple event listening to complex compositional function encapsulation, different implementation approaches each have their suitable application scenarios. Developers should choose the most appropriate solution based on project scale, performance requirements, and team technology stack. As the web platform continues to evolve, more efficient size monitoring APIs may emerge in the future, but current solutions based on resize events remain mainstream and reliable choices.