vue3 watch屏幕宽度变化

在Vue3中，你可以使用`watch`属性来监听屏幕宽度的变化。下面是一个示例代码：

import { onMounted, onBeforeUnmount, reactive, watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      screenWidth: null,
    });

    const handleResize = () => {
      state.screenWidth = document.body.clientWidth;
    };

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

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

    watch(
      () => state.screenWidth,
      (newWidth, oldWidth) => {
        if (newWidth <= 1200) {
          console.log('屏幕宽度小于1200了');
        } else {
          console.log('屏幕宽度没有小于1200');
        }
      }
    );

    return {
      screenWidth: state.screenWidth,
    };
  },
};

在上面的代码中，我们使用了Vue3的`reactive`函数来创建一个响应式对象`state`，其中包含了`screenWidth`属性来记录屏幕宽度。在`onMounted`生命周期钩子中，我们初始化屏幕宽度并添加一个`resize`事件监听器来实时更新屏幕宽度。在`onBeforeUnmount`生命周期钩子中，我们移除了事件监听器，以防止内存泄漏。

最后，我们使用`watch`函数来监听`screenWidth`属性的变化，并在回调函数中根据新的宽度值进行相应的处理。