如何初始化数据，但不要更改原始数据

Question

需要从其他对象“original_settings”初始化Vue数据“设置”，但在数据“设置”更改时不需要更改此对象。如何使它发生？

new Vue({ 
    el: "#app", 
    data: { 
     settings: original_settings   
    } 
}); 

Answer 1

可以以创建对象的deep克隆拷贝使用JSON.parse(JSON.stringify(obj))。

new Vue({ 
    el: "#app", 
    data: { 
    settings: JSON.parse(JSON.stringify(original_settings))   
    } 
}); 

另一种解决方案是使用从Object.assignES6。

new Vue({ 
    el: "#app", 
    data: { 
    settings: Object.assign({}, original_settings)   
    } 
}); 

Answer 2

我不认为这是好的解决方案。 看到有关数据文档： https://vuejs.org/v2/api/#data

文档：

不建议用自己的状态行为来观察对象。 一旦观察到，可以反应特性到根不再添加数据对象

如果需要结合来自外部对象的数据，可以使用计算属性访问它们，或者可以使用存储（ VueX）。

你可以做这样的事情：

var original_settings = { foo: 'var'} 

new Vue({ 
    el: '#el', 
    data: { 
    //empty 
    }, 
    computed: { 
    foo: { 
     get: function() { 
     return original_settings.foo 
     }, 
     set: function (value) { 
     original_setting.foo = value 
     } 
    } 
    } 
})