vue3watch使用

在 Vue 3 中，`watch` 函数的使用方式有所改变。现在，你可以在组件选项中使用 `watch` 选项来监听数据的变化。

以下是使用 `watch` 选项的基本语法：

watch: {
  // 监听的数据
  dataToWatch: {
    // 监听函数
    handler(newVal, oldVal) {
      // 处理逻辑
    },
    // 深度监听
    deep: true,
    // 立即触发监听函数
    immediate: true
  }
}

其中，`dataToWatch` 是你要监听的数据，`handler` 是监听函数。

你可以在 `handler` 函数中处理数据变化后的逻辑。`newVal` 是数据变化后的新值，`oldVal` 是数据变化前的旧值。

如果你想要深度监听数据的变化，可以设置 `deep: true`。如果你想要监听函数在组件初始化时立即被触发一次，可以设置 `immediate: true`。

除了监听具体的数据，你还可以使用 `$watch` 方法来监听整个组件实例上的属性或方法的变化。以下是 `$watch` 方法的使用方式：

const unwatch = this.$watch(
  // 监听的属性或方法
  () => this.dataToWatch,
  // 监听函数
  (newVal, oldVal) => {
    // 处理逻辑
  },
  // 深度监听
  { deep: true }
)

// 停止监听
unwatch()

`$watch` 方法返回一个取消监听的函数，你可以在不需要监听时调用它来停止监听。

希望这些信息能够帮助到你。