vue data 对象结构怎么用 watch

在 Vue 中，可以使用 `watch` 属性来监听 `data` 中的数据变化。 `watch` 可以监视一个表达式的变化，当表达式的值发生改变时，会执行相应的回调函数。

下面是一个示例，假设我们有一个 `data` 对象结构如下：

data() {
  return {
    user: {
      name: 'Tom',
      age: 18
    }
  }
}

我们可以使用 `watch` 来监听 `user` 对象中的 `name` 和 `age` 属性的变化，示例代码如下：

watch: {
  'user.name': function(newVal, oldVal) {
    console.log(`name changed from ${oldVal} to ${newVal}`);
  },
  'user.age': function(newVal, oldVal) {
    console.log(`age changed from ${oldVal} to ${newVal}`);
  }
}

在上述代码中，`watch` 属性监听了 `user.name` 和 `user.age` 两个表达式，当它们的值发生改变时，会执行相应的回调函数。

需要注意的是，当监听对象或数组中的某个属性发生变化时，`watch` 只能监听到对象或数组本身的变化，而不能监听到其属性的变化。如果需要监听属性的变化，可以使用 `deep` 参数来深度监听，示例代码如下：

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log(`user changed from ${oldVal} to ${newVal}`);
    },
    deep: true
  }
}

在上述代码中，`watch` 属性监听了整个 `user` 对象，并且使用了 `deep` 参数来深度监听，当 `user` 对象中的某个属性发生变化时，也会触发回调函数。