Vue.js 响应式页面缩放及事件监听优化

本文将介绍如何在 Vue.js 中实现响应式页面缩放，并优化 window.onresize 事件的监听和移除，提高代码的可读性和维护性。

优化代码

以下代码展示了如何将 window.onresize 方法封装成 resizeWindow 方法，并在 mounted 钩子中添加监听器，destroyed 钩子中移除监听器：

methods: {
    resizeWindow() {
      const scale = Math.min(window.innerWidth/750, window.innerHeight/1334); //根据窗口大小计算缩放比例
      document.body.style.transform = `scale(${scale})`; //设置缩放比例
    },
    
    changeCarousel(index) {
        console.log('index',index);
        this.swiper = this.list[index].swipers;
        console.log('list',this.swiper);   
    },
    
    mouse(index) {
           console.log('下标',index);
           this.content = this.biaoti[index].content;
           console.log('content',this.content);
    }
},
created() {},
onLoad() {
    this.swiper = this.list[0].swipers;
    this.content = this.biaoti[0].content;    
},
mounted() {
    window.onresize = this.resizeWindow;
},
destroyed() {
    window.removeEventListener('resize', this.resizeWindow);
}

代码解析

封装 resizeWindow 方法：将 window.onresize 方法封装成一个独立的方法，提高代码的可读性和可维护性。
使用模板字符串：使用模板字符串语法，使得代码更加简洁易懂。
在 mounted 钩子中添加监听器：在组件挂载时，添加 window.onresize 事件的监听器，确保页面大小改变时可以及时响应。
在 destroyed 钩子中移除监听器：在组件销毁时，移除 window.onresize 事件的监听器，避免内存泄漏。

总结

通过以上方法，我们可以有效地优化 Vue.js 中的响应式页面缩放代码，提高代码的可读性和维护性。同时，在 mounted 和 destroyed 钩子中添加事件监听和移除操作，确保代码的正确性和安全性。