为什么 Vue.js 允许推送到 prop 数组？

Question

当我们尝试直接更改 prop 值时，Vue.js 会显示警告，如下所示：

Vue.component('Games', {
    template: `
        <div>
            <ol>
                <li v-for="game in games">{{ game }}</li>
            </ol>
            <button @click="clear">Clear games</button>
        </div>
    `,
    props: ['games'],
    methods: {
        clear: function () {
            this.games = [];
        }
    }
});

显示的警告是：

避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖。相反，根据道具的值使用数据或计算属性。

我知道为什么会发生这种情况，但令我惊讶的是它不会发生在.push(). 如果我更改方法以向数组添加值而不是重写它，则不会发出警告：

methods: {
    add: function () {
        this.games.push('Whatever');
    }
}

为什么没有警告？如何直接推送到道具很好而重写不是？

Answer 1

这只是因为它Array是一种参考记忆。当您拥有Array或Object存储在任何变量中时，它就是引用变量。

Memory management在这种情况下，引用变量将指向内存地址，heap以便您可以向地址添加更多n个值。但是，即使使用新地址，您也不能直接用任何新值替换该地址。