VUE数据不能驱动视图？$set详细教程

众所周知。VUE最大的优点就是数据驱动视图。当数据发生改变时，会监听到变化，后渲染到页面上。
那么为什么当我们在修改data中声明的数组或对象时。VUE并没有监听到变化呢？
这个我也不知道。我们可以后续再进行补充。
没见过的来看看。见过的进来瞅瞅。
举一个例子~
代码如下：

<template>
  <div>
    <p>这是我定义的数组</p>
    <div>{{this.arr}}</div>
    <button @click="changeArr">点击这里我就要修改数组里第一个</button>
    <p>这是我的对象</p>
    <div>{{this.haha}}</div>
    <button @click="changeObj">点击这里我就要添加对象的属性</button>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      arr: [0, 1, 2, 3, 4, 5, 6],
      haha: {
        name: "123",
        age: 12,
        story: "从前有座山",
       content=""
      }
    };
  },
  methods: {
    changeArr() {
      this.arr[0] = 112233;
      console.log("这是修改之后的数组", this.arr);
      $set(arr, 0, 112233);
    },
    changeObj() {
      this.haha.content = "我是一个小和尚";
      console.log("这是修改之后的对象", this.haha);
    }
  }
};
</script>

补充：vue中修改数组，哪些方法可以触发双向数据绑定？
1.push 加入数组
2.pop 删除数组最后一个
3.shift() 删除数组第一个
4.unshift() 在数组最前面添加
5.splice() 删除/添加/替换
6.sort() 排序
7.reverse()反转

注意：通过下标修改数组内容，不能触发vue的双向绑定