watch如何实现深度监听？

在 Vue.js 中，watch 选项用于侦听数据的变化，并在数据变化时执行相应的操作。如果你需要深度监听一个对象，可以通过将 deep 选项设置为 true 来实现深度监听。

下面是一个示例，演示了如何在 Vue.js 中使用 watch 选项以及如何实现深度监听：

// 假设有一个 Vue 实例
var vm = new Vue({
  data: {
    user: {
      name: 'Alice',
      age: 30,
      address: {
        city: 'Beijing',
        country: 'China'
      }
    }
  },
  watch: {
    'user': {
      handler: function(newUser, oldUser) {
        console.log('用户信息发生变化：', newUser, oldUser);
      },
      deep: true // 设置 deep 选项为 true，实现深度监听
    }
  }
});

// 修改 user 对象中的属性
vm.user.name = 'Bob'; // 这里会触发 watch 中的处理函数
vm.user.address.city = 'Shanghai'; // 这里同样会触发 watch 中的处理函数，因为设置了深度监听

在上面的示例中，我们在 Vue 实例的 watch 选项中对 user 进行了深度监听，当 user 对象内部的属性发生变化时，处理函数会被调用。通过设置 deep: true，我们确保对 user 对象进行了深度监听，即使对象内部的属性发生变化，也能被正确监听到。

需要注意的是，在实际开发中，深度监听可能会带来性能上的损耗，因此建议在确实需要深度监听的情况下使用深度监听。另外，Vue 3 中引入了 watchEffect 和 watch 这两个 API，使用起来更加灵活。