How to properly watch for nested data in vuejs

In Vue.js, watchers are typically used to monitor changes in component data. For nested data, specific strategies are required to ensure Vue correctly tracks all changes.

1. Using String Paths to Monitor Nested Properties

In Vue.js, you can directly specify a string path in the watch option to monitor nested object properties. This approach is straightforward, and Vue automatically handles dependency tracking.

javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  watch: {
    'userProfile.address.city'(newVal, oldVal) {
      console.log(`City changed from ${oldVal} to ${newVal}`);
    }
  }
}

2. Deep Watching

When monitoring all property changes within a nested object, use the deep: true option. This instructs Vue to create a deep watcher, triggering the watch function whenever any nested property changes.

javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  watch: {
    userProfile: {
      handler(newVal, oldVal) {
        console.log('User profile changed');
      },
      deep: true
    }
  }
}

3. Using Computed Properties for Indirect Monitoring

Directly watching nested data can complicate the code, especially when deriving values from nested properties. Instead, use computed properties to simplify the logic and then watch the computed property.

javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  computed: {
    city() {
      return this.userProfile.address.city;
    }
  },
  watch: {
    city(newVal, oldVal) {
      console.log(`City changed from ${oldVal} to ${newVal}`);
    }
  }
}

Each method has its appropriate use case, and the choice depends on your specific requirements and data structure. In practical development, select the most suitable monitoring strategy based on the situation.