vue3事件监听屏幕一旦高度发生变化 就立刻执行的钩子函数

在Vue3中，可以使用`onMounted`和`onUnmounted`来监听组件的挂载和卸载事件，同时可以使用`watch`来监听屏幕高度的变化。

首先，在组件中使用`onMounted`来监听组件的挂载事件，并在其中使用`watch`来监听屏幕高度的变化：

<script>
import { ref, onMounted, onUnmounted, watch } from 'vue';

export default {
  setup() {
    const screenHeight = ref(window.innerHeight); // 屏幕高度

    // 监听屏幕高度的变化
    const handleResize = () => {
      screenHeight.value = window.innerHeight;
    }
    watch(screenHeight, (newVal, oldVal) => {
      console.log('屏幕高度变化了：', newVal);
    });

    // 监听组件的挂载和卸载事件
    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    return {
      screenHeight
    }
  }
}
</script>

在上面的代码中，我们创建了一个名为`screenHeight`的响应式变量，用来保存屏幕的高度。然后，在`handleResize`函数中，我们使用`window.innerHeight`获取当前屏幕的高度，并将其赋值给`screenHeight`变量。最后，我们使用`watch`来监听`screenHeight`变量的变化，并在回调函数中执行相应的操作。

同时，我们还使用`onMounted`和`onUnmounted`来监听组件的挂载和卸载事件，在组件挂载时添加`resize`事件监听器，在组件卸载时移除`resize`事件监听器。这样，当屏幕高度发生变化时，就会立刻执行`handleResize`函数，并更新`screenHeight`变量的值，从而触发`watch`的回调函数，实现立刻执行的效果。