vue3 watch 监听屏幕分辨率变化调用自定义函数

在 Vue3 中，可以使用 `watchEffect` 监听屏幕分辨率变化并调用自定义函数。

具体实现：

1. 在组件的 `setup` 中引入 `watchEffect`：

import { watchEffect } from 'vue';

2. 在 `setup` 中使用 `watchEffect` 监听屏幕分辨率变化：

setup() {
  watchEffect(() => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    // 自定义函数
    handleResize(width, height);
  });
}

3. 自定义函数 `handleResize` 中处理屏幕分辨率变化的逻辑：

function handleResize(width, height) {
  // 处理逻辑
}

完整代码：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
import { watchEffect } from 'vue';

export default {
  setup() {
    watchEffect(() => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      handleResize(width, height);
    });

    function handleResize(width, height) {
      // 处理逻辑
    }
  }
};
</script>