vue2.0数组对象检测问题！

<template>
  <div>
    <span>{{ arr }}</span>
    <!--<span v-for="item in arr" :key="item">{{ item }}</span>-->
    <br/>
    <span v-for="item in arr2" :key="item.num">{{ item.num }}</span>
  </div>
</template>
<script>
  // export default {
  //   data () {
  //     return {
  //       arr: [],
  //       arr2: []
  //     }
  //   },
  //   created () {
  //     // 可以检测变化
  //     this.arr.push(1)
  //     this.arr2.push({num: '张三'})
  //   },
  //   mounted () {
  //     // 可以检测变化
  //     this.arr.push(1)
  //     this.arr[0] = 2
  //     this.arr2[0].num = '张三2'
  //   }
  // }

  // export default {
  //   data() {
  //     return {
  //       arr: [{num: 1}, {num: 2}]
  //     }
  //   },
  //   mounted() {
  //     // 不检测变化
  //     setTimeout(() => {
  //       this.arr[0].asd = 1
  //       this.arr[1].asd = 2
  //       // 你可以拷贝，可以set
  //       this.arr = JSON.parse(JSON.stringify(this.arr))
  //     })
  //   }
  // }

  // export default {
  //   data() {
  //     return {
  //       arr: [{num: 1}, {num: 2}]
  //     }
  //   },
  //   mounted() {
  //     // 不检测变化
  //     setTimeout(() => {
  //       // 可以变化
  //       this.arr[0].num = 4
  //       // 不可以变化，你需要拷贝，|| set
  //       this.arr[0] = {num: 3}
  //       // 你可以拷贝，可以set
  //       console.log(this.arr)
  //     })
  //   }
  // }

  export default {
    data() {
      return {
        arr: [1, 2],
        arr2: [{num: 3}, {num: 4}]
      }
    },
    // 不可以检测变化
    mounted() {
      this.arr[0] = 4
      // 如果我这里尝试去改变我上面的对象的值，那么上面的这个this.arr[0] = 4 是可以检测变化的。页面是变化的、
      // 但是我不写下面这个东西，this.arr[0] = 4 这个东西在页面是不生效的！
      // 得出一个结论就是，如果一个东西触发了界面刷新，那么上面的数组修改元素 是可以被重新渲染！
      this.arr2[0].num = 5
    }
  }
</script>