你可以使用深层观察者:

watch: {
  item: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

现在它将检测对项目数组中对象的任何更改以及对数组本身的添加(当与Vue.set一起使用时)。这是一个JSFiddle: http://jsfiddle.net/je2rw3rs/

EDIT

如果你不想观察顶层对象的每一个变化，只是想要一个不那么尴尬的语法来直接观察嵌套对象，你可以简单地观察一个computed:

var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

这是JSFiddle: http://jsfiddle.net/oa07r5fw/

这里没有提到，但是如果要扩展Vue类，也可以使用Vue -property-decorator模式。

import { Watch, Vue } from 'vue-property-decorator';

export default class SomeClass extends Vue {
   ...

   @Watch('item.someOtherProp')
   someOtherPropChange(newVal, oldVal) {
      // do something
   }

   ...
}

我使用了deep:true，但发现在监视函数中的新旧值始终是相同的。作为之前解决方案的替代方案，我尝试了这个，它将通过将整个对象转换为字符串来检查它的任何变化:

created() {
    this.$watch(
        () => JSON.stringify(this.object),
            (newValue, oldValue) => {
                //do your stuff                
            }
    );
},

对于任何寻找Vue 3的人

import { watch } from 'vue';

...
...

watch(
  () => yourNestedObject,              // first param, your object
  (currValue, prevValue) => {          // second param, watcher callback
    console.log(currValue, prevValue);
  },
  { deep: true }                       // third param, for deep checking
);

您可以在这里参考文档:https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watch

我对使用deep: true的公认答案的问题是，当深度观察一个数组时，我不能轻易地识别数组中的哪个元素包含了更改。我找到的唯一明确的解决方案是这个答案，它解释了如何制作一个组件，以便您可以单独观察每个数组元素。

跟踪列表中单个更改的项

如果你想监视列表中的所有项目，并知道列表中的哪个项目发生了变化，你可以在每个项目上分别设置自定义监视器，如下所示:

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
  },
  methods: {
    handleChange (newVal, oldVal) {
      // Handle changes here!
      // NOTE: For mutated objects, newVal and oldVal will be identical.
      console.log(newVal);
    },
  },
  created () {
    this.list.forEach((val) => {
      this.$watch(() => val, this.handleChange, {deep: true});
    });
  },
});

如果你的列表没有立即填充(就像在最初的问题中)，你可以将逻辑从created移到任何需要的地方，例如在.then()块中。

观察不断变化的列表

如果你的列表本身更新到有新的或删除的项目，我已经开发了一个有用的模式，“浅层”观察列表本身，并动态观察/取消观察项目随着列表的变化:

// NOTE: This example uses Lodash (_.differenceBy and _.pull) to compare lists
//       and remove list items. The same result could be achieved with lots of
//       list.indexOf(...) if you need to avoid external libraries.

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
    watchTracker: [],
  },
  methods: {
    handleChange (newVal, oldVal) {
      // Handle changes here!
      console.log(newVal);
    },
    updateWatchers () {
      // Helper function for comparing list items to the "watchTracker".
      const getItem = (val) => val.item || val;

      // Items that aren't already watched: watch and add to watched list.
      _.differenceBy(this.list, this.watchTracker, getItem).forEach((item) => {
        const unwatch = this.$watch(() => item, this.handleChange, {deep: true});
        this.watchTracker.push({ item: item, unwatch: unwatch });
        // Uncomment below if adding a new item to the list should count as a "change".
        // this.handleChange(item);
      });

      // Items that no longer exist: unwatch and remove from the watched list.
      _.differenceBy(this.watchTracker, this.list, getItem).forEach((watchObj) => {
        watchObj.unwatch();
        _.pull(this.watchTracker, watchObj);
        // Optionally add any further cleanup in here for when items are removed.
      });
    },
  },
  watch: {
    list () {
      return this.updateWatchers();
    },
  },
  created () {
    return this.updateWatchers();
  },
});