vue3中watch()的用法

回答：在 vue3 中，watch() 用于监听一个数据的变化并执行相应的操作。其基本用法如下：

watch(数据名称或者是一个箭头函数，回调函数或者是一个配置对象)

其中，配置对象可以包含以下属性：

- immediate：是否在初始值被设置之后立即执行一次回调函数。默认为 false。
- deep：是否深度监听对象的变化。默认为 false。
- flush：触发回调函数的时机。可选值有 'pre'（在侦听的值变化之前立即触发回调函数）、'post'（在侦听的值变化之后立即触发回调函数）以及 'sync'（让回调函数同步执行）。默认为 'pre'。

需要注意的是，如果要监听一个数组或对象的变化，建议开启 deep 选项。

相关问题

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的用法

在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函数来取消监听。