VUE坑(1)二维数组动态更新问题

1.测试vue中二维数组的动态渲染

话不多说，先上代码，如下图用vue先定义一个10X10的二维数组

<template>
  <div id="card_container">
    <div class="body">
      <div class="column" v-for="(item,i) in arr" :key="i">
        <div class="item" v-for="(jtem,j) in item" :key="j">{{jtem}}</div>
      </div>
    </div>
    <button @click="change">改变</button>
  </div>
</template>
export default {
  data() {
    return {
      arr: []
    };
  },
  created() {
    this.getNumber();
    console.log(this.arr[0][0]);
  },
  methods: {
    change() {
      this.arr.splice(0, 1, 18);
      console.log(this.arr[0][0]);
    },
    getNumber() {
      this.arr = new Array(10);
      for (let i = 0; i < 10; i++) {
         this.arr[i] = new Array(10);
         for (let j = 0; j < 10; j++) {
          this.arr[i][j] = 11;//让 arr 的所有值都为11
         }
      }
    }
  }
};

测试发现，arr[0][0]确实发生了变化，但是渲染的视图却没有动态更新。

如果把数组的第一维作为形参，传递到函数中，再执行这样的操作，发现虽然数字变了，但视图还是没用动态更新。

<template>
  <div id="card_container">
    <div class="body">
      <div class="column" v-for="(item,i) in arr" :key="i">
        <div @click="change(item,j)" class="item" v-for="(jtem,j) in item" :key="j">{{jtem}}</div>
      </div>
    </div>
  </div>
</template>
  methods: {
    change(a,i) {
      console.log(a[i]);
      a.splice(i, 1, 18);
      console.log(a[i]);
    }

2.于是测试一维数组（数组中有对象的情况），发现一维数组可以动态渲染

并比较两种改变值的方法

1. 对象的赋值方法this.$set(this.arr[0],'test',18)
2. 数组的赋值方法this.arr[0].splice(0,1,18)

<template>
  <div id="card_container">
    <div class="body">
      <div class="column" v-for="(item,i) in arr" :key="i">
        {{arr[i].test}}
      </div>
    </div>
    <button @click="change">点我</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 10,
      arr: [],
      b:0
    };
  },
  created() {
    this.getNumber();
    console.log(this.arr[0]);
  },
  methods: {
    change() {
      this.arr.splice(0, 1, {'test':18});
      console.log(this.arr[0]);
    },
    getNumber() {
      this.arr = new Array(this.count);
      for (let i = 0; i < this.count; i++) {
        this.arr[i]={'test':11}
      }
    }
  }
};

测试发现，只有用数组的方法赋值，视图才能动态更新。

总结：

1. 二维数组的动态更新，在创建数组时，不能 用new的方式

2. 如果数组视图不能动态更新，可以手动在改数组后面加一个数组的push操作。this.arr[0].push()，这样就能保证视图的动态更新了