vue3+vite+ts监听视口宽度

要监听视口宽度，可以使用 Vue3 提供的 `watchEffect` 函数，结合 `window.innerWidth` 属性来实现。

首先，需要在组件中引入 `watchEffect` 函数：

import { watchEffect } from 'vue';

然后，在组件的 `setup` 方法中，使用 `watchEffect` 函数来监听视口宽度的变化：

setup() {
  watchEffect(() => {
    const width = window.innerWidth;
    console.log('视口宽度：', width);
  });
}

这样，每当视口宽度发生变化时，就会在控制台输出当前的视口宽度。

需要注意的是，`watchEffect` 函数会在组件渲染时立即执行一次，然后会自动追踪其依赖项的变化来重新执行。因此，只要视口宽度发生变化，就会触发 `watchEffect` 函数的执行。

相关问题

vue3+vite+ts实时监听视口宽度

要实时监听视口宽度的变化，可以使用 `window.addEventListener` 方法来监听 `resize` 事件，然后在事件处理函数中更新视口宽度的值。

首先，在组件的 `setup` 方法中，声明一个响应式的变量来保存视口宽度的值：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const screenWidth = ref(window.innerWidth);

    onMounted(() => {
      window.addEventListener('resize', () => {
        screenWidth.value = window.innerWidth;
      });
    });

    return {
      screenWidth
    };
  }
}

在 `onMounted` 钩子函数中，通过 `window.addEventListener` 方法来监听 `resize` 事件。当事件触发时，将 `screenWidth` 变量的值更新为当前的视口宽度。

这样，每当视口宽度发生变化时，`screenWidth` 变量的值就会随之更新，从而实现了实时监听视口宽度的效果。在模板中可以直接使用 `screenWidth` 变量来显示当前的视口宽度。