vue3中watch的用法

在Vue3中，watch可以通过以下方式使用：

1.在setup函数中使用watch：

import { watch } from 'vue'

setup() {
  // 声明响应式变量
  const count = reactive({ value: 0 })
  
  // 监听count.value的变化
  watch(() => count.value, (newValue, oldValue) => {
    console.log(`count变为了${newValue}，旧值为${oldValue}`)
  })
  
  return {
    count
  }
}

2.在组件中使用watch：

import { watch } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    // 监听count的变化
    watch('count', (newValue, oldValue) => {
      console.log(`count变为了${newValue}，旧值为${oldValue}`)
    })
  }
}

以上是watch的使用方法，在Vue3中还提供了watchEffect函数来监听变量的变化。需要注意的是Vue3中取消监听的方法不再是$watch，而是返回一个unwatch函数来取消监听。

相关问题

vue3中watch用法

在 Vue3 中，watch 的使用方式有所变化。下面介绍一下 Vue3 中 watch 的用法：

1. 监听单个变量

import { watch } from 'vue';

watch(
  () => count.value,
  (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }
);

上面代码中，`watch` 监听的是 `count.value` 这个变量，当 `count` 的值发生变化时，回调函数就会被触发。

2. 监听多个变量

import { watch } from 'vue';

watch(
  [count1, count2],
  ([newVal1, newVal2], [oldVal1, oldVal2]) => {
    console.log(
      `count1 changed from ${oldVal1} to ${newVal1}, count2 changed from ${oldVal2} to ${newVal2}`
    );
  }
);

上面代码中，`watch` 同时监听 `count1` 和 `count2` 两个变量，当任意一个变量的值发生变化时，回调函数就会被触发。

3. 监听对象或数组

import { watch } from 'vue';

const obj = reactive({
  count: 0,
  name: 'test',
});

watch(
  () => obj,
  (newVal, oldVal) => {
    console.log(
      `obj changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`
    );
  }
);

上面代码中，`watch` 监听的是整个对象 `obj`，当 `obj` 中任意一个属性的值发生变化时，回调函数就会被触发。

4. 监听异步变量

import { watch, ref } from 'vue';

const count = ref(0);
const asyncCount = ref(0);

watch(
  count,
  async (newVal, oldVal) => {
    asyncCount.value = await someAsyncFunc(newVal);
  }
);

上面代码中，`watch` 监听的是 `count` 这个变量，回调函数是异步的，当 `count` 的值发生变化时，会调用 `someAsyncFunc` 异步函数，并将返回值赋值给 `asyncCount`。

以上就是 Vue3 中 watch 的用法，需要注意的是，在 Vue3 中，watch 的使用需要引入 `watch` 函数。

vue3中watch的使用方法

在Vue 3中，watch函数用于监听特定的数据源，并在数据源发生变化时执行回调函数。使用watch函数的基本语法是：

watch(source, callback, options)

其中，source是要监听的数据源，可以是响应式对象、计算属性或者一个返回值的函数。callback是当数据源发生变化时要执行的回调函数。options是一个可选的选项对象，用于配置watch函数的行为。

通过引用，我们可以了解到watch函数只会追踪明确侦听的数据源，并且仅在数据源发生变化时才会触发回调。这样可以避免在发生副作用时追踪依赖，从而更精确地控制回调函数的触发时机。

另外，引用提到，如果想在侦听器回调中能访问被Vue更新之后的DOM，可以使用flush选项。通过设置flush: 'post'选项，即可指明在DOM更新后执行回调。

除了watch函数，还可以使用watchEffect函数来简化代码。引用给出了一个使用watchEffect函数的示例。watchEffect函数允许我们自动跟踪回调的响应式依赖，无需显式指定侦听的数据源。在回调函数中，可以直接访问被监听对象的属性。

综上所述，在Vue 3中，我们可以使用watch函数或watchEffect函数来监听数据源的变化，并在变化发生时执行相应的回调函数。使用flush选项可以控制回调函数的触发时机，以及访问被Vue更新后的DOM。