浅探 Vue 为什么不增加数组下标响应式

Vue 的双向数据绑定，使得修改数据后，视图就会跟着发生更新，比如对数组进行增加元素、切割等操作。然而直接通过下标修改数组内容后，视图却不发生变化。那么，在保留原有的数组响应方式下，为什么 Vue 不增加对数组下标的响应式监听呢？

arr[index] = val 不是响应式的

在 Vue 官网的 列表渲染 — Vue.js 中，有强调 Vue 不能 直接检测通过数组下标改变值的变化，需要通过 数组更新检测 来实现。

<template>
  <div>
    <span v-for="i in arr">{
  { i }}</span>
    <button @click="updateIndex">改变下标对应的值</button>
    <span v-for="key in Object.keys(obj)">{
  { obj[key] }}</span>
    <button @click="updateKey">改变key对应的值</button>
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
      arr: [ 1, 2, 3, 4 ],
      obj: {
     a: 1, b: 2, c: 3, d: 4 }
    }
  },
  methods: {
    
    updateIndex() {
    
      this.arr[0]++				// 对数组这样的操作不会引起视图的更新
      // this.arr.splice(0, 0)	 // 需要调用数组的方法，才能使视图更新
    },
    updateKey() {
    
      this.obj