vue3 watch用法

Vue 3 中的 watch 用于监测数据变化并执行相应的回调函数。与 Vue 2 相比，Vue 3 中的 watch 有一些变化。

在 Vue 3 中，你可以使用 `watch` 函数来创建一个 watcher。它接受两个参数：要监测的数据和回调函数。

下面是一个示例：

import { watch } from 'vue';

export default {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    watch(
      () => this.count,
      (newValue, oldValue) => {
        console.log(`count 变为 ${newValue}，之前的值为 ${oldValue}`);
      }
    );
  },
};

在上面的示例中，我们创建了一个 `count` 属性，并使用 `watch` 函数监听它的变化。每当 `count` 发生改变时，回调函数将被触发，并且会将新值和旧值作为参数传递进来。

请注意，在 Vue 3 中，watch 函数的使用方式有所不同，并且它是一个独立的函数而不是 Vue 实例的选项。

相关问题

vue3 watch用法

Vue3中的watch API与Vue2中的watch API使用方式有所不同。Vue3中的watch API提供了两种使用方式：基于函数的watch和基于API的watch。

1. 基于函数的watch

基于函数的watch使用方式与Vue2中的watch API类似。需要在组件中使用$watch API，并传入一个函数作为watch的回调函数。当被监听的数据发生变化时，回调函数会被触发。

import { watch, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watch(() => state.count, (newVal, oldVal) => {
      console.log(`count的值从${oldVal}变成了${newVal}`)
    })

    return {
      state
    }
  }
}

2. 基于API的watch

基于API的watch使用方式与基于函数的watch有所不同。需要调用组件实例的watch API，并传入被监听的数据和回调函数。

import { onMounted, watchEffect, ref } from 'vue'

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

    onMounted(() => {
      setInterval(() => {
        count.value++
      }, 1000)
    })

    watchEffect(() => {
      console.log(`count的值为${count.value}`)
    })

    return {
      count
    }
  }
}

基于API的watch还支持一些高级用法，如监听多个数据、设置监听的深度、设置监听的类型等，具体可以参考Vue3文档。

vue3watch用法

Vue 3中的`watch`是一个响应式属性监听器，它允许你在数据发生变化时执行特定的操作。它的基本语法如下：

this.$watch('expression', callback, [options]);

- `expression`：要监视的对象路径或计算属性。可以是一个字符串表达式，也可以是返回值依赖于其他属性的函数。
- `callback`：每当指定的表达式改变时调用的回调函数。这个回调接收两个参数：新的值和旧的值。
- `options`（可选）：这是一个选项对象，包含以下选项：
- `{ deep }`：默认为`false`，如果设置为`true`，则将深度侦听表达式的变更（数组或对象内部的属性）。对于复杂结构的数据非常有用。
- `{ immediate }`：默认为`false`，如果设置为`true`，在初次创建时立即执行回调，而不仅仅是首次数据变化时。
- `{ user }`：默认为`false`，如果是`true`，表示回调是在异步任务完成后触发（如Promise），而不是同步。

例子：

// 监听`data.value`的变化
this.$watch('data.value', (newValue, oldValue) => {
  console.log(`新值：${newValue}, 旧值：${oldValue}`);
});

// 深度监听嵌套对象的变化
this.$watch('nestedObject', deepWatchCallback, { deep: true });

function deepWatchCallback(newVal, oldVal) {
  //...
}