resize.js - 技术栈

代码

javascript 复制代码

import { debounce } from "lodash";
export default {
  data() {
    return {
      handleResize: debounce(this.resizeChart, 100),
    };
  },
  mounted() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    this.disposeChart();
  },
  updated() {
    this.handleResize();
  },
  methods: {
    resizeChart() {
      this.chart?.resize();
    },
    disposeChart() {
      // dispose() 方法是图表库提供的一个方法，用于销毁图表实例，释放其占用的资源。
      this.chart?.dispose();
    },
  },
};

这段代码是 Vue 组件中一个非常典型的处理图表自适应窗口大小变化的逻辑，核心目的是让图表在浏览器窗口尺寸改变或组件更新时，能够平滑地调整自身大小，同时做好资源清理避免内存泄漏。

代码整体功能拆解

核心依赖与数据定义

javascript 复制代码

javascript
运行
import { debounce } from "lodash"; // 引入lodash的防抖函数
export default {
  data() {
    return {
      // 把resizeChart方法包装成防抖函数，延迟100ms执行
      handleResize: debounce(this.resizeChart, 100),
    };
  },

debounce（防抖）：窗口 resize 事件会高频触发（比如拖动窗口边框时每秒触发几十次），防抖能让 resizeChart 只在最后一次触发后等待 100ms 执行，避免频繁调用图表 resize 导致性能卡顿。

这里把防抖后的函数 handleResize 存在 data 里，是为了保证添加 / 移除事件监听时用的是同一个函数引用（否则 removeEventListener 会失效）。

生命周期钩子：事件监听与清理

javascript 复制代码

javascript
运行
mounted() {
  // 组件挂载后，给window添加resize事件监听，触发时执行防抖后的resize逻辑
  window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
  // 组件销毁前，移除resize事件监听（避免内存泄漏）
  window.removeEventListener("resize", this.handleResize);
  // 销毁图表实例，释放图表占用的DOM/内存资源
  this.disposeChart();
},

mounted：组件渲染完成后，监听浏览器窗口大小变化。

beforeDestroy：组件销毁时必须移除事件监听（否则即使组件没了，事件还在，会导致内存泄漏），同时销毁图表实例释放资源。

组件更新与方法定义

javascript 复制代码

javascript
运行
updated() {
  // 组件数据更新导致DOM变化后，主动触发图表resize
  this.handleResize();
},
methods: {
  resizeChart() {
    // 安全调用图表的resize方法（?.是可选链，避免chart未定义时报错）
    this.chart?.resize();
  },
  disposeChart() {
    // 销毁图表实例，释放资源
    this.chart?.dispose();
  },
},

updated：Vue 组件的 DOM 更新完成后触发，比如图表容器大小因数据变化改变时，主动调整图表尺寸。

resizeChart：核心方法，调用图表库（如 ECharts、Highcharts）的resize方法让图表适配容器大小。

disposeChart：销毁图表实例，彻底释放图表占用的内存和 DOM 绑定。

总结

这段代码的核心作用和关键点：

自适应调整：监听浏览器窗口 resize 事件，结合防抖优化性能，让图表自动适配窗口大小。

主动更新：组件 DOM 更新后主动触发图表 resize，保证数据变化时图表尺寸正确。

资源清理：组件销毁时移除事件监听、销毁图表实例，避免内存泄漏（这是前端图表开发的关键最佳实践）。

简单来说，这是 Vue 中处理图表自适应的 "标准写法"，既保证了交互体验（不卡顿），又避免了内存泄漏问题。