vue watch函数

`watch` 是 Vue.js 中的一个选项，它用于监听数据变化并执行相应的回调函数。在 Vue 组件中，我们可以通过在 `watch` 选项中定义一个对象来监听数据变化。该对象的键是要监听的数据属性名，值是一个回调函数，当该属性发生变化时，该回调函数将被触发。

例如，以下是一个组件中 `watch` 的使用示例：

export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`message changed from ${oldValue} to ${newValue}`)
    }
  }
}

在上面的示例中，我们定义了一个名为 `message` 的数据属性，并在 `watch` 选项中监听它。当 `message` 的值发生变化时，该组件将输出一条消息到控制台。

除了监听单个属性外，我们还可以使用 `$watch` 方法来监听一个表达式。例如：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  created() {
    this.$watch(
      () => `${this.firstName} ${this.lastName}`,
      (newValue, oldValue) => {
        console.log(`name changed from ${oldValue} to ${newValue}`)
      }
    )
  }
}

在上面的示例中，我们使用 `$watch` 方法监听一个表达式，该表达式由 `firstName` 和 `lastName` 两个属性组成。当这两个属性的值发生变化时，该组件将输出一条消息到控制台。

需要注意的是，`watch` 选项和 `$watch` 方法都是用于监听数据变化的，但它们之间有一些区别。`watch` 选项只能在组件实例创建时定义，而 `$watch` 方法可以在任何时候调用。另外，`watch` 选项可以监听对象的属性，而 `$watch` 方法只能监听表达式。