vue3 watchEffect监听function

Vue3的watchEffect函数是一个高级监听器，用于监听一个函数的执行，并在函数内部依赖的响应式数据发生变化时自动重新执行该函数[^1]。它的语法如下：

watchEffect(effect: WatchEffect, options?: WatchOptionsBase): WatchStopHandle;

其中，effect是要监听的函数，options是可选的配置项，返回值是一个用于停止监听的函数。

下面是一个示例，演示了如何使用watchEffect监听一个函数：

const boy = {
  age: 18,
  name: 'John'
};

const stop = watchEffect(() => {
  console.log(boy.age);
});

在上面的示例中，watchEffect会自动执行传入的函数，并在boy.age发生变化时重新执行该函数。如果你想停止监听，只需要调用返回的stop函数即可：

stop();

相关问题

vue3 watch 延时监听

可以使用 `watchEffect` 和 `setTimeout` 来实现延时监听。具体实现如下：

import { watchEffect } from 'vue'

watchEffect((onInvalidate) => {
  let timer = null
  const delay = 1000 // 延时时间，单位为毫秒

  function handleChange() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      // 在这里写需要延时监听的代码
    }, delay)
  }

  // 监听需要延时监听的数据
  const unwatch = watchEffect(() => {
    handleChange()
  })

  onInvalidate(() => {
    unwatch()
    clearTimeout(timer)
  })
})

在上面的代码中，我们使用 `watchEffect` 监听需要延时监听的数据，并在回调函数中调用 `handleChange` 函数。`handleChange` 函数中使用 `setTimeout` 来实现延时监听，当数据变化时，会清除之前的定时器并重新设置一个新的定时器，等待一定时间后执行需要延时监听的代码。

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>