vue给data的属性赋值时，有时不会响应式更新到视图。

Question

当只修改data.list数组的值时，控制台打印数据已更新，但是视图不更新。
如果家还是那个一条修改name属性的值时。又可以了。

不知是什么原因，求教！

// this.data.name = 'web...'
this.data.list[0] = 'aaa';
this.data.list[1] = 'bbb';
this.data.list[2] = '333333';

this.data.name = 'web...'
this.data.list[0] = 'aaa';
this.data.list[1] = 'bbb';
this.data.list[2] = '333333';

test.vue

<template>
  <div class="v-set-wrap">
    <span class="set-item">{{data.name}}, {{data.list}}</span>
    <button @click="changeData">changeData</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        name: 'vue',
        list: [1, 2, 3]
      }
    };
  },
  methods:{
    changeData(){
        // this.data.name = 'web...'; // 不修改name属性值时，视图不会更新
        this.data.list[0] = 'aaa';
        this.data.list[1] = 'bbb';
        this.data.list[2] = '333333';
        console.log(this.data);
    }
  },
  mounted(){}
};
</script>

Answer 1

你这样直接对数组操作是不会触发dom的更新的，更改了name之后可以更新，是因为更改name可以触发dom更新，所以数组的值也能更新，要操作数组有两种方法：
1.this.$set(this.data.list, 0,'aaaa')
2.this.data.list.splice(0, 1,'aaaa')

https://cn.vuejs.org/v2/guide...

Answer 2

name是值，'list'是数组，数组操作除非是push、splice这些增删操作的时候，才会更新到视图。
对对象、数组操作，这里你需要用this.$set(arr,idx,data)方法

this.$set(this.list,0,'aaa');
this.$set(this.list,1,'bbb');
this.$set(this.list,2,'333333');

$set参考

Answer 3

vue只监听了数组的splice,push,unshift等方法
你可以用set来修改

Answer 4

请使用this.$set()来操作。

Answer 5

我觉得这是vue的一个bug!
既然数据都更新了，视图没更新。。