前端监测窗口尺寸和元素尺寸变化的方法

前端监测窗口尺寸变化和元素尺寸变化的方法

window.resize

简介

window.resize事件是浏览器提供的一种事件，用于监听窗口大小的改变。这意味着当用户调整浏览器窗口大小时，相关的JavaScript代码将被触发执行。这为开发者提供了一种机制，可以在不同屏幕尺寸下优化网页布局和样式。

注意事项

性能问题：resize 事件可能会频繁触发，尤其是在用户拖动窗口大小时。如果事件处理函数中有复杂的逻辑，可能会导致性能问题。可以使用防抖（debounce）技术来减少事件触发的频率。
防抖处理：防抖是一种性能优化技术，它可以确保事件处理函数在一定时间内只执行一次，即使事件被多次触发。

语法结构

window.addEventListener('resize', function() {
    console.log('窗口大小发生了变化');
    // 在这里添加你的逻辑
});

示例

假设你有一个 div 元素，你希望在窗口大小变化时调整它的宽度和高度

<div id="resizableDiv" style="width: 50%; height: 50%; background-color: lightblue;"></div>

window.addEventListener('resize', function() {
    var div = document.getElementById('resizableDiv');
    div.style.width = window.innerWidth * 0.5 + 'px';
    div.style.height = window.innerHeight * 0.5 + 'px';
});

防抖处理

function debounce(func, wait) {
    var timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(func, wait);
    };
}

window.addEventListener('resize', debounce(function() {
    console.log('窗口大小发生了变化（防抖处理）');
    // 在这里添加你的逻辑
}, 250));

resizeObserver

ResizeObserver 是一个现代的浏览器 API，用于监听 DOM 元素的大小变化。

与传统的 window.resize 事件不同，ResizeObserver 可以精确地监听某个特定元素的大小变化，而不仅仅是窗口大小的变化。

可以实时获取元素的尺寸变化，并进行相应的操作。

用法

1、创建 resizeObserver 实例

需要一个回调函数作为参数，这个回调函数会在监测元素的大小发生变化时被触发。

const observer = new ResizeObserver(callback);

2、指定监测的目标元素

它可以是任何DOM元素，例如一个<div>元素或其他HTML元素

const target = document.querySelector('#elementToObserve');
observer.observe(target);

3、编写回调函数

回调函数会在元素的大小或位置变化时被触发，它接受两个参数：entries 和 observer。

entries：一个Resize Observer Entry对象的数组，每个对象描述了一个被观察元素的尺寸和位置变化。
observer：对观察器本身的引用。通常用于在回调函数中进行操作，例如停止观察或处理被观察元素的变化

entries 的contentRect 属性中包含了被观察元素的信息，包括宽度（width）和高度（height）

const callback = (entries, observer) => {
  entries.forEach(entry => {
    const { target, contentRect } = entry;
    
     // 处理元素尺寸变化
    // contentRect包含了元素的新尺寸和位置信息
    
    const target = entry.target; 
    const contentRect = entry.contentRect;
    console.log(`目标元素: ${target}`); 
    console.log(`宽度: ${contentRect.width}px`);
    console.log(`高度: ${contentRect.height}px`);
  });
};

示例

vue3项目实现echarts图表大小自适应 .vue文件拆分

<template>
  <div ref="chartContainer" :style="{ width: containerWidth, height: containerHeight }">
    <div style="width: 100%; height: 100%" ref="chartLineDom"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'

//接收父组件传值
const props = defineProps({
  xdata: {
    type: Array,
    default: () => []
  },
  y1: {
    type: Array,
    default: () => []
  },
  y2: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: () => ''
  },
  legend: {
    type: Array,
    default: () => []
  }
})

// 父元素
const containerWidth = ref('100%')
const containerHeight = ref('500px')
const chartContainer = ref<any>(null)
// resizeObserver 实例
const resizeObserver = ref<any>(null)

// 声明echarts实例
const chartLineDom = ref()
// 图表实例
let myChart = ref<any>(null)

// 监听窗口变化，调整图表大小
const resizeChart = () => {
  if (myChart.value) {
    myChart.value.resize()
  }
}

onMounted(() => {
  showChart()
  if (chartContainer.value) {
    resizeObserver.value = new ResizeObserver(resizeChart)
    resizeObserver.value.observe(chartContainer.value)
  }
})

onBeforeUnmount(() => {
  if (myChart.value) {
    myChart.value.dispose()
    myChart.value = null
  }
  if (resizeObserver.value) {
    resizeObserver.value.disconnect()
    resizeObserver.value = null
  }
})

watch(
  () => props.xdata,
  () => {
    showChart()
  },
  {
    deep: true
  }
)

const showChart = () => {
  if (!myChart.value) {
    myChart.value = echarts.init(chartLineDom.value)
  }

  // 按对应格式装载数据并赋予下方
  const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
 }
  myChart.value.setOption(option)
}

// 导出图片 -- base64格式；父组件拿到值后直接展示在img的src属性中即可
const getChartImg = () => {
  return myChart.value.getDataURL({
    type: 'png',
    pixelRatio: 2,
    backgroundColor: '#fff'
  })
}

// 暴露给父组件 -- 以供父组件生成图片
defineExpose({ getChartImg })
</script>

<style scoped>
div {
  transition:
    width 0.3s,
    height 0.3s;
}
</style>

存在一个问题（js部分）：使用 const myChart = ref<any>(null) 对echarts 图表进行实例声明时，其不再具备大小自适应；而使用 const resizeObserver = ref<any>(null) 对resizeObserver进行实例声明则无影响。

原因分析

ref： Vue 3 提供的响应式 API，用于创建一个响应式变量；通常用于在 Vue 组件的 < script setup > 中声明响应式变量。变量是响应式的，当它的值发生变化时，Vue 会自动更新依赖它的视图。
let ：普通 JavaScript 变量，非响应式。用于声明一个普通的变量，不需要响应式特性。变量是非响应式的，修改它的值不会触发 Vue 的更新机制。

本示例中的 myChart 声明的是一个echarts实例，通常不需要vue的响应式特性，因为它的更新和操作都是通过 ECharts 的 API 完成的，而不是通过 Vue 的响应式系统。因此，使用 let myChart = null 是更合适的选择。

resizeObserver.value.observe(chartContainer.value) 的行为同样也不依赖 Vue 的响应式系统。它的工作原理是基于浏览器的原生 ResizeObserver API，与 Vue 的响应式机制无关。所以使用let进行声明其不会影响其功能。

回到初始问题，使用ref声明echarts实例后，在使用Echarts自带的resize() API进行自适应时报错，其无法自适应大小。

控制台报错信息如下：
在这里插入图片描述
无法读取未定义的属性（读取“type”）

ref 创建的对象默认是响应式的。这意味着当你改变 myChart 的内容时，Vue 会自动追踪这个对象并触发视图的更新。然而，Echarts 实例本身是一个复杂的对象，它并不需要或不适应 Vue 的响应式系统，因为 Vue 无法有效地追踪和更新 echarts 实例的状态。

myChart 会被 Vue 的响应式系统通过 Proxy 代理，从而让它变成响应式对象。由于 Proxy 是 Vue 3 实现响应式的核心方式，当你访问 myChart 时，它被转换为代理对象，并且 Proxy 会拦截访问行为。这可能导致一些性能问题或行为异常，尤其是在你手动操作 echarts 实例时，比如调用 resize 方法，或者访问像 coordSys.type 这样的属性。

在 echarts 中，coordSys 是图表实例的坐标系对象，通常是直接访问其内部属性，如 coordSys.type，来判断图表的坐标系类型。当 myChart 变成响应式对象时，它的 coordSys 或其他深层属性可能会被 Vue 的代理拦截，从而导致你无法直接访问它，或者它的某些方法不能正常工作。

解决办法：使用markRaw

markRaw 用于标记一个对象，使其在 Vue 的响应式系统中保持“原始状态”。这意味着被 markRaw 标记的对象在 Vue 的响应式逻辑中不会被代理，因此不会变为响应式对象。

即，标记一个对象，使其永远不会变成响应式的。

// 接上一个javascript代码块 这里是代码片段
import {  markRaw } from 'vue'

const showChart = () => {
  if (!myChart.value) {
    myChart.value = markRaw(echarts.init(chartLineDom.value))
  }
}

与markRaw相对应的 toRaw

作用：用于获取一个响应式对象的原始对象，toRaw 返回的对象不再是响应式的，不会触发视图更新。

使用场景：在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 toRaw 可以确保它们收到的是普通对象。

<script setup lang='ts' >
import { reactive, toRaw } from 'vue';
 
// person 是响应式数据
const person = reactive({
    name: 'Tom',
    age:20,
})
// rawPerson 原始数据
const rawPerson = toRaw(person)
 
// 对比
console.log('响应式数据',person);
console.log('原始数据',rawPerson);
// 响应式数据 可修改
const changeAge = () => {
    person.age += 1;
}
// 原始数据  不可修改
const rawChangeAge = () => {
    console.log('rawPerson中的age',rawPerson.age);
    rawPerson.age += 1;
}
</script>