如何避免Vue中的反应性

Question

我正在从属性“模型”（我从Laravel中的刀片属性模型获得）分配一个对象给数据属性模型。后来的数据属性模型由于绑定到表单输入字段而发生了变化。但是道具“模型”也发生了变化。它们是同一对象。如何避免这种行为？我需要属性“模型”保持不变。我在created（）方法和data（）中尝试了此方法：

 Vue.set(this, 'model', this.transferredData.model);

那没有帮助

Answer 1

您可以使用spread syntax创建一个新对象，这样它将仅使新创建的对象发生变异。

Vue.set(this, 'model', {...this.transferredData.model});
// or Vue.set(this, 'model', Object.assign({}, this.transferredData.model)); 

注意：如果嵌套，则必须递归解构，或者可以使用：

Vue.set(this, 'model',JSON.parse(JSON.stringify(this.transferredData.model)))