watch使用vue3

Vue 3 中的 watch 选项与 Vue 2 中有一些区别。在 Vue 3 中，watch 选项被移除了，取而代之的是使用新的 API：`watchEffect` 和 `watch`。

1. `watchEffect`：这是一个立即执行的监听器，用于监听响应式数据的变化并执行相应的操作。它不需要指定要监听的数据，而是自动追踪所依赖的响应式数据。当任何被追踪的数据发生变化时，watchEffect 内部的代码将会重新执行。例如：

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log('响应式数据变化了！');
});

2. `watch`：与 Vue 2 中的 `watch` 类似，用于监听指定的响应式数据，并在其发生变化时执行相应的操作。它需要指定要监听的数据和回调函数。例如：

import { watch } from 'vue';

watch(
  () => data.value, // 监听的数据
  (newValue, oldValue) => {
    console.log(`数据从 ${oldValue} 变为 ${newValue}`);
  }
);

需要注意的是，Vue 3 中的 `watch` API 提供了更多功能和选项，如 immediate、deep 等，可以根据具体需求进行配置。以上是基本用法，你可以根据实际情况进行使用。

相关问题

watch监听vue3

在Vue3中，我们可以使用`watch`函数来监听响应式对象的变化。`watch`函数接受两个参数：要监听的目标和回调函数。当目标发生变化时，回调函数将被触发。

例如，我们可以这样使用`watch`函数来监听一个响应式对象的属性值：

import { watch, reactive } from 'vue';

const obj = reactive({ count: 0 });

watch(() => obj.count, (count) => {
  console.log(`count is: ${count}`);
});

在上面的例子中，我们使用`watch`函数来监听`obj.count`属性的变化。当`obj.count`发生变化时，回调函数将被调用，并打印出新的属性值。

此外，如果我们想要在侦听器回调中能够访问Vue更新之后的DOM，我们可以使用`flush: 'post'`选项。例如：

import { watchEffect } from 'vue';

watchEffect(() => {
  // 在这里可以访问Vue更新之后的DOM
}, { flush: 'post' });

在上面的例子中，我们使用`watchEffect`函数来创建一个侦听器，并指定`flush: 'post'`选项。这样，在每次Vue更新之后，侦听器的回调函数将被调用，这样我们就能够访问到更新后的DOM。

需要注意的是，如果我们想手动结束一个监听，我们可以通过调用`watch`或`watchEffect`函数返回的函数来实现。例如：

import { watch, watchEffect } from 'vue';

const unwatch = watch(() => {/* 监听的操作 */});
const unwatchEffect = watchEffect(() => {/* 侦听器的操作 */});

// 当监听不再需要时，调用返回的函数来手动结束监听
unwatch();
unwatchEffect();

在上面的例子中，我们创建了一个`watch`和一个`watchEffect`监听，然后通过调用返回的函数`unwatch`和`unwatchEffect`来手动结束这两个监听。

这样，我们就可以使用`watch`函数来监听Vue3中的响应式对象的变化，并且通过指定`flush: 'post'`选项来在侦听器回调中访问更新后的DOM。

vue3 watch 使用

在Vue3中，watch使用方式相比Vue2有一些变化。下面是Vue3中使用watch的一些注意点：

1. watch选项的使用方式有变化，Vue3中使用watch的方法是通过调用watch函数来实现，如下所示：

   import { watch } from 'vue'
   
   watch(数据, 监听器函数, 配置选项)

2. 监听器函数可以接收到两个参数，分别是新值和旧值。而在Vue2中只有一个参数。

3. Vue3中可以使用ref和reactive两种响应式数据类型，watch可以监听这两种类型的数据变化。

4. watch函数的配置选项包括：`immediate`、`deep`、`flush`等。

下面是一个使用watch的例子：

<template>
  <div>
    <p>count: {{ count }}</p>
    <p>double: {{ double }}</p>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const double = ref(0)

    watch(count, (newCount, oldCount) => {
      double.value = newCount * 2
    }, { immediate: true })

    return {
      count,
      double
    }
  }
})
</script>

上面的代码中，我们定义了一个计数器count和它的两倍double。当count变化时，我们通过watch监听到count的变化，然后更新double的值。在这里，我们将immediate选项设置为true，这样在组件初始化时就会立即执行监听器函数。