How to properly watch for nested data in vuejs

在 Vue.js 中，watcher 通常用于监听组件中的数据变化。对于嵌套数据，我们需要采用一些特定的策略来确保 Vue 可以正确地监听到所有的变化。

1. 使用字符串路径监听嵌套属性

在 Vue.js 中，可以直接在 watch 选项中使用字符串路径来监听嵌套对象的属性。这种方式相对直观，Vue 会自动处理依赖追踪。

javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  watch: {
    'userProfile.address.city'(newVal, oldVal) {
      console.log(`城市从 ${oldVal} 变更为 ${newVal}`);
    }
  }
}

2. 深度监听

如果需要监听一个嵌套对象内部的所有属性变化，可以使用 deep: true 选项。这告诉 Vue 创建一个深度 watcher，当嵌套数据中的任意属性发生变化时，都会触发 watch 函数。

javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  watch: {
    userProfile: {
      handler(newVal, oldVal) {
        console.log('用户资料发生变化');
      },
      deep: true
    }
  }
}

3. 使用计算属性间接监听

有时候，直接使用 watch 对嵌套数据进行监听可能会让代码变得复杂，特别是当你需要根据某些嵌套属性计算出新的值时。此时，可以使用计算属性来简化操作，然后对这个计算属性进行监听。

javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  computed: {
    city() {
      return this.userProfile.address.city;
    }
  },
  watch: {
    city(newVal, oldVal) {
      console.log(`城市从 ${oldVal} 变更为 ${newVal}`);
    }
  }
}

以上三种方法各有用武之地，具体使用哪一种取决于你的具体需求和数据结构。在实际开发中，建议根据实际情况选择最合适的监听策略。