Vue 中使用 watch 监听对象变化的方法

在 Vue 开发中，我们经常需要对数据的变化做出响应，watch 就是实现这一功能的强大工具。特别是在监听对象变化时，掌握其正确使用方法能有效提升开发效率与应用的交互性。

基本的 watch 使用方式很简单。在 Vue 组件中定义 watch 选项，它是一个对象，其键是需要监听的数据属性名，值是一个回调函数。例如，我们有一个对象 userInfo，里面包含 name 和 age 属性。想要监听 userInfo 的变化，可以这样写：

export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        age: 25
      }
    }
  },
  watch: {
    userInfo: {
      handler(newValue, oldValue) {
        console.log('userInfo 变化了', newValue, oldValue);
      },
      deep: true
    }
  }
}

这里使用了 deep 选项，将其设置为 true 后，Vue 会对 userInfo 对象进行深度监听，即对象内部任何属性的变化都会触发 handler 回调函数。如果不设置 deep 为 true，那么只有当 userInfo 整体被替换时才会触发监听。

当对象属性层次结构较深时，精确监听某个深层属性也是很常见的需求。比如 userInfo.address.city，可以这样做：

watch: {
  'userInfo.address.city': {
    handler(newCity, oldCity) {
      console.log('城市变化了', newCity, oldCity);
    }
  }
}

通过这种字符串路径的方式，我们能够准确地监听深层属性的变化。

watch 还支持异步操作。假设监听对象变化后需要进行一个 API 调用获取相关数据，我们可以在 handler 函数中使用 async/await 来处理：

watch: {
  userInfo: {
    async handler(newValue) {
      try {
        const response = await axios.get('/api/user-data', { params: newValue });
        console.log('获取到的数据', response.data);
      } catch (error) {
        console.error('请求出错', error);
      }
    },
    deep: true
  }
}

在 Vue 中使用 watch 监听对象变化，通过灵活运用 deep 选项、精确监听深层属性以及结合异步操作，能够满足各种复杂的业务需求，为我们的应用开发带来极大的便利。