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

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

window.resize

简介

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

注意事项

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

语法结构

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>