vue3项目 怎么监听屏幕高度一旦发生变化 就回立刻执行 赋值操作

你可以使用 Vue 3 提供的 `watchEffect` 方法来监听屏幕高度变化并立即执行赋值操作。具体实现步骤如下：

1. 在组件的 `setup` 方法中使用 `watchEffect` 方法，监听屏幕高度变化。

import { watchEffect } from 'vue';

export default {
  setup() {
    watchEffect(() => {
      const screenHeight = window.innerHeight;
      // 执行赋值操作
      // ...
    });
  }
}

2. 在 `watchEffect` 回调函数中获取屏幕高度，然后执行赋值操作。

import { watchEffect } from 'vue';

export default {
  setup() {
    watchEffect(() => {
      const screenHeight = window.innerHeight;
      // 执行赋值操作
      // ...
    });
  }
}

这样，当屏幕高度发生变化时， `watchEffect` 回调函数会立即执行。

相关问题

vue3项目 怎么可以持续监听屏幕高度一旦发生变化 就回立刻执行 赋值操作

你可以使用 `window` 对象的 `resize` 事件来持续监听屏幕高度变化，并在事件触发时执行赋值操作。具体实现步骤如下：

1. 在组件的 `setup` 方法中使用 `onMounted` 和 `onUnmounted` 钩子函数来添加和移除 `resize` 事件监听器。

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    const handleResize = () => {
      const screenHeight = window.innerHeight;
      // 执行赋值操作
      // ...
    };
  }
}

2. 在 `handleResize` 函数中获取屏幕高度，然后执行赋值操作。

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    const handleResize = () => {
      const screenHeight = window.innerHeight;
      // 执行赋值操作
      // ...
    };
  }
}

这样，当屏幕高度发生变化时， `handleResize` 函数会被立即调用。同时，由于我们使用了 `onMounted` 和 `onUnmounted` 钩子函数，所以在组件加载和卸载时会自动添加和移除 `resize` 事件监听器。

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`的回调函数，实现立刻执行的效果。