vue通过下标修改数组里面内容，同时通过下标修改数组对象里面的内容，然后页面数组更新了。。。

vue通过下标修改数组里面内容，同时通过下标修改数组对象里面的内容，然后页面数组更新了？？？

项目里面一直都是知道vue通过下标修改数组里面内容是触发不了页面的更新的，需要用其他方式，当我写其他内容的时候，发现如果在更新其他能触发页面更新的时候，神奇的来了，之前的数组没触发更新的，居然也跟着页面更新了。。。

原来是我孤陋寡闻了，vue的响应式还是没有深入去探讨和了解

<template>
  <div>
    首页
    <div>{{ arr }}</div>
    <div>{{ objarr }}</div>
    <div @click="btn">按钮</div>
    <div @click="btn1">按钮</div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      arr: [1, 2, 3],
      objarr: [
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        }
      ]
    }
  },
  components: {},
  created() {},
  computed: {},
  methods: {
    btn() {
      // this.arr[0] = 100
      this.objarr[0].num = 100
      // this.$set(this.arr, 0, this.arr[0])
      console.log(this.arr)
    },
    btn1() {
      this.arr[0] = 100
      console.log(this.arr)
      // this.objarr[0].num = 100
      // console.log(this.arr)
    }
  }
}
</script>

<style scoped lang="scss"></style>

过程是这样的：
1、先触发btn事件，objarr 在页面的数据更新了；
2、再触发btn1事件，arr 没有更新，因为修改下标不会触发页面更新；

接下来换个顺序：
1、先触发btn1事件，arr 没有更新；
2、再触发btn事件，objarr ，arr 都更新，怀疑是不是vue响应式把data里面的数据更新到页面；