Question

多层嵌套有关Vue的数据，如下所示：

out:{
   arr:[
        {a:1}
       ]
}

当我使用this.out.arr[0] = {a:2}更改值时，视图不会更新。但是，如果我的代码是this.out.arr[0].a = 2;，则视图将更新。

这里是a link！

您可以在方法changeA中注释和取消注释代码以查看不同的结果！

Answer 1

我相信这只是通过索引更新数组的标准警告：

Vue无法通过直接将值分配给索引来检测对数组所做的更改。

所以代替这个：

this.out.arr[0] = {a:2}

...您需要使用此代码：

this.$set(this.out.arr, 0, {a: 2})

更新：

要了解问题中提到的两种情况之间的区别，可能有助于将它们完整地写出来。

this.out.arr[0] = {a:2}

// ... is equivalent to ...

const arr = this.out.arr // read
arr[0] = {a: 2}          // write

位置：

this.out.arr[0].a = 2

// ... is equivalent to ...

const obj = this.out.arr[0] // read
obj.a = 2                   // write

在上面的两个示例中，我拆分了表达式的读取和写入部分。使用数组索引读取值不是问题，只需编写即可。第一个示例尝试编写0的{{1}}属性，这违反了Vue索引的警告。第二个示例尝试写入arr的{{1}}属性，该属性不具有数组索引，因此没有此类问题。

Answer 2

@skirtle答案是更新vue数据的正确方法！在vue文档中，它说

例如，当您设置vm.someData ='new value'时，该组件将不会立即重新呈现。刷新队列后，它将在下一个“滴答”中更新。

因此，直接通过索引设置不会立即更新dom...。您需要执行forceUpdate

  this.out.arr[0] = {a:2}; // can not updated
  this.$nextTick(function () {        
    this.$forceUpdate(); // will be update
  });