Question

在我的Vue.js应用程序中，我有一个数组值，仅当用户完成特定的“刷新”操作时才应更新该值。但是，一旦我为该数组值分配了一个新值，该数组值就会变为反应性的，并且随着分配值中数据的更改而立即更改。数组值应保持无效。

例如，我有一个方法refresh()，该方法在被触发时旨在用应为反应性的displayedData更新不应为反应性的currentData。 displayedData仅应在调用刷新时更新。

methods: {
    refresh: function() {
        this.displayedData = this.currentData;
    }
}

Answer 1

要使一个值不变为静态，而不使其变为静态，可以使用JSON对其进行“复制”以进行编码，然后对其进行解码。

this.displayedData = JSON.parse(JSON.stringify(this.currentData));

这会将一个值的当前状态分配给另一个值，对第一个值的更改不会更改第二个值，直到再次触发此代码为止。

Answer 2

如果您不将currentData添加到data（）方法中，则它将是无反应的。

export default {
    currentData: [],
    data() {
        return {

        }
    },
    methods: {
        refresh: function() {
            this.displayedData = this.currentData;
        }
    }
}

然后您仍可以使用{{ $options.currentData }}在该部分中引用currentData

Answer 3

一种方法（完全不禁用反应性）是对您的临时数据使用不同的数组，并在用户按下“刷新”时将内容移入良好的数组。

您可以将第一个数组中的值复制到临时数组中，例如this.temp = this.permanent.slice()或created生命周期函数中的mounted。

切片将对数组进行浅表复制。如果您还需要克隆数组中的项目，则可以使用一些深层复制库或JSON.parse(JSON.stringify(...))方法。

如何使Vue.js中的值无效？

3 个答案: