vue3项目浏览器在全屏和小屏的时候如何监听

在Vue3项目中，可以使用`window`对象来监听浏览器在全屏和小屏状态下的改变。

首先，需要在Vue组件的`mounted`生命周期钩子函数中添加全屏和退出全屏的事件监听器，代码如下：

mounted() {
  window.addEventListener('fullscreenchange', this.handleFullScreenChange)
  window.addEventListener('webkitfullscreenchange', this.handleFullScreenChange)
  // 其他浏览器的全屏事件监听，如mozfullscreenchange，msfullscreenchange等

  window.addEventListener('resize', this.handleResize)
},

全屏状态变化时会触发`fullscreenchange`或`webkitfullscreenchange`事件，需要编写相应的事件处理函数`handleFullScreenChange`来处理全屏变化时的逻辑。

接下来，需要添加分辨率变化时的事件监听器，`resize`事件会在浏览器窗口大小发生改变时触发。在Vue组件中，编写`handleResize`事件处理函数来处理窗口大小变化时的逻辑。

methods: {
  handleFullScreenChange() {
    // 在这里处理全屏状态变化时的逻辑
    if (document.fullscreenElement || document.webkitFullscreenElement) {
      // 当前处于全屏状态
      // ...
    } else {
      // 当前处于非全屏状态
      // ...
    }
  },
  handleResize() {
    // 在这里处理窗口大小变化时的逻辑
    const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    if (screenWidth > 1024) {
      // 大屏逻辑
      // ...
    } else {
      // 小屏逻辑
      // ...
    }
  }
},

以上代码中，`handleFullScreenChange`函数根据`document.fullscreenElement`或`document.webkitFullscreenElement`是否为`null`来判断当前是否处于全屏状态。在其处理逻辑内，你可以根据需要自行编写全屏和非全屏状态时的操作。

`handleResize`函数通过获取窗口的宽度和高度来判断当前窗口是否为小屏（例如宽度小于1024），你可以根据需要在该函数的处理逻辑内编写相应的操作。

需要注意的是，当组件销毁时，也需要将之前添加的事件监听器移除，以避免内存泄漏，可以在Vue组件的`beforeUnmount`生命周期钩子函数中移除事件监听器，例如：

beforeUnmount() {
  window.removeEventListener('fullscreenchange', this.handleFullScreenChange)
  window.removeEventListener('webkitfullscreenchange', this.handleFullScreenChange)
  // 其他浏览器的全屏事件监听器的移除，如mozfullscreenchange，msfullscreenchange等

  window.removeEventListener('resize', this.handleResize)
},

以上是使用Vue3项目监听浏览器全屏和小屏的方法，可以根据实际需求来编写相应的处理逻辑。