1.在data中定义一个变量，用于记录屏幕尺寸；
且做好定义为 null2.使用 window.onresize 方法获取屏幕尺寸；
需要在 created() 中3.使用 watch 方法即可实时
监听屏幕尺寸；
页面初始化mounted的时候，通过`` document.body.clientWidth ``和`` document.body.clientHeight ``获取到浏览器的宽和高，然后通过 ``window.onresize`` 来监听浏览器窗口的变化，在这里来改变我们的变量宽和高即可。
（created()的时候不行，因为此时document还没有生成）
<template>
<section class="p-10">
<h1> {{ scree.
在Ant Design Vue中，您可以使用`Vue`中提供的官方方式来监听浏览器窗口变化而不重新加载页面。下面是一个简单的示例：
首先，在您的组件中导入`Vue`和`ant-design-vue`：
```javascript
import Vue from 'vue';
import { debounce } from 'ant-design-vue';
然后，您可以使用`Vue`提供的生命周期函数`mounted`来监听窗口大小的变化：
```javascript
mounted() {
this.$nextTick(() => {
window.addEventListener('resize', this.handleResize);
在这个例子中，我在组件的`mounted`生命周期函数中注册了一个`resize`事件的监听器，并将其与一个叫做`handleResize`的方法绑定。
接下来，您需要在组件中定义`handleResize`方法来处理窗口大小的变化：
```javascript
methods: {
handleResize: debounce(function() {
// 处理窗口大小变化的逻辑
}, 300),
在这个例子中，我使用了`debounce`函数，它可以将频繁触发的事件缩减为一定时间内只触发一次。这样可以避免事件过于频繁地触发，提高性能。
最后，不要忘记在组件销毁时移除窗口大小变化的监听：
```javascript
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
通过添加类似上述代码，在Ant Design Vue中您就可以监听浏览器窗口变化而不重新加载页面了。当窗口大小变化时，`handleResize`方法会被调用，您可以在其中添加适当的逻辑来应对窗口大小变化所带来的变化。
