惊！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>