如何使 Vue.js 中的值成为非响应式的？

Question

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

例如，我有一个方法refresh() ，它在触发时意味着用currentData更新应该是反应性的displayedData ，它不应该是反应性的。 displayedData仅应在调用 refresh 时更新。

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

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

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

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

Answer 4

您可以使用解构分配： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment?retiredLocale=it

this.displayedData = {...this.currentData}

您将拥有一个使用第一个“复制”数据制作的新对象