vue watch使用教程

Vue 的 watch 是一个非常常用的功能，它可以监听一个数据的变化，并在数据变化时执行相应的操作。下面是一个简单的 Vue watch 的使用教程。

假设我们有一个 Vue 组件，它有一个 data 属性叫做 message，我们想要在 message 发生变化时输出一句话。我们可以在组件的 methods 中定义一个函数来输出这句话：

methods: {
  logMessage() {
    console.log('message changed:', this.message)
  }
}

然后，在组件的 watch 中监听 message 的变化，当 message 变化时执行 logMessage 函数：

watch: {
  message(newValue, oldValue) {
    this.logMessage()
  }
}

这样，每当我们修改 message 的值时，都会触发 watch 中的函数，输出一句话。

除了像上面这样直接在 watch 中定义函数，我们还可以使用字符串的形式，指定一个组件中已经定义的函数来处理数据变化：

watch: {
  message: 'logMessage'
}

这样，当 message 变化时，会自动调用组件中的 logMessage 函数。

除了监听单个数据的变化，我们还可以监听多个数据的变化。在 watch 中，我们可以使用对象的形式来监听多个数据的变化：

watch: {
  message(newValue, oldValue) {
    this.logMessage()
  },
  name(newValue, oldValue) {
    this.logName()
  }
}

这样，当 message 或者 name 发生变化时，都会触发相应的函数。

除了以上的基本用法，Vue 的 watch 还有很多高级用法，比如 deep、immediate、handler 等选项，可以满足更多的需求。需要根据具体情况进行选择使用。