vue3 watch实时监听

在Vue 3中，`watch`是用于监听响应式数据变化的一个功能，它可以捕捉到数据的变化并执行相应的副作用函数。Vue 3的`watch`功能比Vue 2更加灵活和强大，它可以监听单个数据源，也可以监听多个数据源，并且支持返回值清理和立即执行等特性。

以下是一个使用`watch`监听响应式数据的简单示例：

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`当前计数为: ${newValue}`);
});

在这个例子中，`count`是一个响应式的引用（ref），我们使用`watch`来监听它的变化。当`count`的值发生变化时，`watch`的回调函数会被调用，并且会接收到新的值和旧的值作为参数。

`watch`还支持监听多个响应式数据源，例如：

watch([count, anotherRef], ([newCount, newAnother], [oldCount, oldAnother]) => {
  console.log(`计数和另一个值分别更新为：${newCount} 和 ${newAnother}`);
});

`watch`提供了更多的选项，比如配置`immediate`来让监听器立即执行，或者配置`deep`来深度监听嵌套对象的变化。

相关问题

vue3 watch深度监听

在Vue3中，watch默认情况下只会监听对象的第一层属性，如果需要深度监听，可以通过设置`deep`选项为`true`来实现。具体实现方法如下所示：

import { watch } from 'vue'

watch(
  // 监听的对象
  () => state.obj,
  // 监听到变化后的回调函数
  (newVal, oldVal) => {
    console.log('newVal:', newVal)
    console.log('oldVal:', oldVal)
  },
  // 配置项
  {
    deep: true // 开启深度监听
  }
)

需要注意的是，当监听的对象为`Proxy`对象时，`oldValue`值将会出现异常，此时与`newValue`相同。如果需要监听`Proxy`对象的某个属性，可以通过在监听对象的回调函数中获取该属性的值来实现。另外，在Vue3中，强制开启了深度监听，无法关闭。

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` 来实现延时监听，当数据变化时，会清除之前的定时器并重新设置一个新的定时器，等待一定时间后执行需要延时监听的代码。