vue的 watch怎么使用

在 Vue.js 中，watch 是一个实例方法，用于监听数据的变化。它可以监听单个数据的变化，也可以监听多个数据的变化。

下面是一个示例：

// 在 Vue 实例中定义一个 data 属性
data() {
  return {
    message: 'Hello, Vue.js!'
  }
},

// 使用 watch 监听 message 的变化
watch: {
  message(newVal, oldVal) {
    console.log(`message 从 ${oldVal} 变成了 ${newVal}`)
  }
}

在上面的代码中，我们定义了一个名为 `message` 的数据属性，并使用 `watch` 监听它的变化。每当 `message` 发生变化时，`watch` 就会执行回调函数，并将新值和旧值作为参数传入回调函数中。

除了监听单个数据的变化，`watch` 还可以监听多个数据的变化。例如：

watch: {
  message(newVal, oldVal) {
    console.log(`message 从 ${oldVal} 变成了 ${newVal}`)
  },
  count(newVal, oldVal) {
    console.log(`count 从 ${oldVal} 变成了 ${newVal}`)
  }
}

在上面的代码中，我们不仅监听了 `message` 属性的变化，还监听了 `count` 属性的变化。这两个属性发生变化时，`watch` 都会执行相应的回调函数。

除了上述示例中的写法，`watch` 还可以使用对象的方式进行定义。例如：

watch: {
  // 监听 message 的变化
  'message': {
    handler(newVal, oldVal) {
      console.log(`message 从 ${oldVal} 变成了 ${newVal}`)
    },
    // 深度监听
    deep: true
  },
  // 监听对象中的属性
  'obj.name': {
    handler(newVal, oldVal) {
      console.log(`obj.name 从 ${oldVal} 变成了 ${newVal}`)
    }
  }
}

在上面的代码中，我们除了监听 `message` 属性的变化，还监听了 `obj` 对象中的 `name` 属性的变化。注意，当监听对象中的属性时，需要使用字符串形式的属性名，并在属性名前添加对象名称。例如：`'obj.name'`。

除此之外，`watch` 还支持第三个参数，用来指定监听的时机。默认情况下，`watch` 会在数据变化后立即执行回调函数。如果想要在下一次 DOM 更新后再执行回调函数，可以将第三个参数设置为 `vue.nextTick`。

watch: {
  message(newVal, oldVal) {
    console.log(`message 从 ${oldVal} 变成了 ${newVal}`)
  },
  // 在下一次 DOM 更新后执行回调函数
  count(newVal, oldVal, nextTick) {
    nextTick(() => {
      console.log(`count 从 ${oldVal} 变成了 ${newVal}`)
    })
  }
}

以上是 Vue.js 中 `watch` 的基本用法，希望能对你有所帮助。