vue wacth监听数据

在 Vue.js 中，可以使用 `watch` 选项来监听数据的变化。`watch` 可以监视单个属性或一个表达式，并在监视目标发生变化时触发回调函数。

例如，假设我们有以下数据：

data() {
  return {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  }
}

我们想要在 `firstName` 或 `lastName` 变化时更新 `fullName`。这可以通过以下代码实现：

watch: {
  firstName: function(val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function(val) {
    this.fullName = this.firstName + ' ' + val
  }
}

在上面的代码中，我们使用了一个名为 `watch` 的选项，它是一个对象，包含一个或多个属性，每个属性都有一个对应的回调函数。

当 `firstName` 变化时，它的回调函数将被调用，并传入新的值 `val`。在回调函数中，我们使用 `this.lastName` 更新 `fullName`。

当 `lastName` 变化时，它的回调函数也将被调用，并传入新的值 `val`。在回调函数中，我们使用 `this.firstName` 更新 `fullName`。

通过上述实现，我们实现了一个数据的响应式更新机制，可以灵活应对数据的变化。