watch怎么实现深度监听

在 Vue 中，watch 默认只会监听对象的一层属性变化，如果要实现深度监听，可以使用 `deep` 选项。设置 `deep: true` 后，watch 会递归监听对象内部所有属性的变化。

举个例子，假设我们有一个对象 `person`：

const person = {
  name: 'Tom',
  age: 20,
  address: {
    city: 'Beijing',
    street: '123 Main St'
  }
}

如果我们只使用普通的 watch：

watch: {
  person: {
    handler(newVal, oldVal) {
      console.log('person changed', newVal, oldVal)
    },
    deep: false
  }
}

那么只有当 `person` 对象本身被重新赋值时，watch 才会触发。如果我们需要深度监听 `person` 对象内部属性的变化，可以设置 `deep: true`：

watch: {
  person: {
    handler(newVal, oldVal) {
      console.log('person changed', newVal, oldVal)
    },
    deep: true
  }
}

这样，当 `person` 对象内部的属性（如 `name`、`age`、`address`、`city`、`street`）发生变化时，watch 都会触发。但是需要注意的是，这会带来一些性能问题，因为递归监听所有属性的变化可能会导致性能下降。因此，应该尽量避免使用过于深层次的监听。