vue3 监听屏幕宽度变化

在 Vue3 中，可以使用 `watchEffect` 函数来监听屏幕宽度的变化。首先，需要在组件中引入 `reactive` 和 `ref` 函数：

import { reactive, ref } from 'vue'

然后，可以使用 `reactive` 函数创建一个响应式对象，用于存储屏幕宽度的值：

const state = reactive({
  screenWidth: window.innerWidth
})

接下来，在 `mounted` 钩子函数中，可以使用 `window.addEventListener` 来监听 `resize` 事件，从而实时更新屏幕宽度的值：

const screenWidth = ref(window.innerWidth)

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

最后，在 `watchEffect` 函数中，可以监听 `screenWidth` 的变化，并执行相应的操作：

watchEffect(() => {
  if (state.screenWidth < 768) {
    // 执行某些操作
  } else {
    // 执行其他操作
  }
})

这样，就可以实现在 Vue3 中监听屏幕宽度的变化了。