javascript - Vuex `people[0] = { age: people[0].age + 1 };` 不会触发重新渲染，为什么？

Question

请参阅这个最小示例:

标记

<template>
  <div>
    <button @click="$store.commit('changePeople1Works')">changePeople1Works</button>
    <button @click="$store.commit('changePeopleNotWorking')">changePeopleNotWorking</button>
    <pre>
      <code>
        {{$store.state}}
      </code>
    </pre>
  </div>
</template>

Vuex

import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    people: [{ age: 1 }]
  },
  mutations: {
    changePeople1Works(state) {
      let people = state.people;
      people[0].age = people[0].age + 1;
    },
    changePeopleNotWorking(state) {
      let people = state.people;
      people[0] = { age: people[0].age + 1 };
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

代码沙箱:https://codesandbox.io/s/recursing-sound-fvql7?file=/src/main.js:0-519

我有两个像这样的突变

1. 人员[0].年龄 = 人员[0].年龄 + 1;
2. people[0] = { 年龄: people[0].age + 1 };

1 有效，但是 2 不起作用，为什么会发生这种情况？

我知道你必须使用push、pop、sort来触发重新渲染。

如果直接改变数组元素，它不应该触发重新渲染。

但是，1 方法有效，为什么？!

1方法还直接变异数组元素，太困惑了。

Answer 1

来自the docs

Vue cannot detect property addition or deletion.

和

...it’s possible to add reactive properties to a nested object using the Vue.set(object, propertyName, value) method

和

Vue cannot detect the following changes to an array:

• When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue

• 当你修改数组的长度时，例如vm.items.length = newLength

但它没有提到改变现有的对象[属性]。

• 在第一个示例中，现有对象属性正在发生变化，因此它可以工作。 (people 数组第一项的 age 属性。)

• 在第二个示例中，直接通过索引设置数组项，因此它不起作用。 (people 数组的 0 索引。)

这似乎违反直觉，因为先前设置的数组索引无法通过索引修改，但先前设置的对象属性可以。

我猜这与Object.defineProperty有很大关系。以及 Vue 的 react 过程。

(一开始我也很困惑。)