vue.js$watch对象数组

Question

mounted: function() {
  this.$watch('things', function(){console.log('a thing changed')}, true);
}

< code>things是一个对象数组< code>[{foo:1}，{foo:2}]

$watch检测对象何时添加或删除，但不检测对象上的值何时更改。我该怎么做？

Answer 1

您可以使用$watch（'arr.0'， （） =

从 https://v2.vuejs.org/v2/api/#vm-watch：

注意：在更改（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。Vue不保留预变异值的副本。

但是，您可以迭代的判决/数组和$watch每个项目独立。即。$watch（'foo.bar'）-这监视对象'foo'的属性'bar'中的更改。

在本例中，我们观察arr_of_numbers中的所有项目，以及arr_ of_ objects中所有项目的“foo”属性：

mounted() {
        this.arr_of_numbers.forEach( (index, val) => {
            this.$watch(['arr_of_numbers', index].join('.'), (newVal, oldVal) => {
                console.info("arr_of_numbers", newVal, oldVal);
            });
        });

        for (let index in this.arr_of_objects) {
            this.$watch(['arr_of_objects', index, 'foo'].join('.'), (newVal, oldVal) => {
                console.info("arr_of_objects", this.arr_of_objects[index], newVal, oldVal);
            });
        }

    },
    data() {
        return {
            arr_of_numbers: [0, 1, 2, 3],
            arr_of_objects: [{foo: 'foo'}, {foo:'bar'}]
        }
    }

Answer 2

如果有人需要获取数组内更改的项目，请选中它：

jsdild示例

后示例代码：

new Vue({
  ...
  watch: {
    things: {
      handler: function (val, oldVal) {
        var vm = this;
        val.filter( function( p, idx ) {
            return Object.keys(p).some( function( prop ) {
                var diff = p[prop] !== vm.clonethings[idx][prop];
                if(diff) {
                    p.changed = true;                        
                }
            })
        });
      },
      deep: true
    }
  },
  ...
})

Answer 3

您应该将对象而不是布尔值作为选项传递，因此：

mounted: function () {
  this.$watch('things', function () {
    console.log('a thing changed')
  }, {deep:true})
}

或者您可以将观察器设置到< code>vue实例中，如下所示:

new Vue({
  ...
  watch: {
    things: {
      handler: function (val, oldVal) {
        console.log('a thing changed')
      },
      deep: true
    }
  },
  ...
})

[演示]