vue中更新数组下标一个

vue2代码：


methods:{
             test(){
                    //this.arr[0] = {name:"new"} //这个不会更新视图
                    this.arr[0].name = "new" //这个会更新视图
                    
                }
         }

我知道vue2中更新的数组方法是：
重写的七大原生方法： push 、pop、shift 、unshift 、splice 、sort 、reverse
或者vue2中响应的Vue.set()方法

我知道更改下标不会产生视图更新
我大概能理解上面的代码为什么会更新，但是，不是很明白，怎么表述


参照下原理
你可以简单理解成 get set 监听的是 . 属性的变化
他并没有去监听数组的下标，他只是没有处理数组的变化，并不是不能监听数组下内容的变化，但是有时层级过深或者后续新增的属性，并不能做到实时响应（这种就是层级过深的情况，无法监听）

或者你从template里面直接去渲染了一个数组 v-for，然后 click=（scope.row）,这个row不就是数组对象下的某个对象吗？那为什么[{}],{}内容变化，视图就可以直接更新呢？不用太纠结这些东西，再有这些其实数据已经变化了，只是视图没有变更，用$focusUpdate()重载一下也可以

这段代码之所以会更新视图，是因为Vue2对数据进行了劫持（响应式）处理。在这个过程中，Vue2会使用Object.defineProperty方法将数组中的每个元素都转换为getter和setter，从而可以在修改数组中元素的属性时监听到变化并更新视图。

因此，当在test方法中通过this.arr[0].name = "new"来修改数组中第一个元素的name属性时，Vue2会监听到这个变化并触发视图的更新。而如果直接使用this.arr[0] = {name:"new"}来替换数组中第一个元素，由于这种方式并没有修改该元素的属性，Vue2就无法监听到变化，也就不会触发视图的更新。

如果直接给数组赋值一个新的对象，Vue会认为这是一个新的引用，并不会触发响应式更新，
当修改对象的属性时，Vue会检测到属性的变化，并触发响应式更新