时间戳

首页 > 解决方案 > 为什么 Vue.js 允许推送到 prop 数组？

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

问题描述

当我们尝试直接更改 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');
    }
}

为什么没有警告？直接推到道具上是怎么做到的，而重写不是？

标签： javascriptvue.js

解决方案

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

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

推荐阅读