如何初始化数据但不改变原始数据答案

【问题标题】：How to initialize data but make it not to change original如何初始化数据但不改变原始数据
【发布时间】：2017-10-09 13:38:08
【问题描述】：

需要从其他对象“original_settings”初始化Vue数据“settings”，但当数据“settings”改变时，不要改变这个对象。如何实现？

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

【问题讨论】：

它对你有用吗？
是的，一切正常。所以没有让我立即接受答案。

标签： javascript php laravel vue.js vuejs2

【解决方案1】：

您可以使用JSON.parse(JSON.stringify(obj)) 来创建对象的deep 克隆副本。

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

另一种解决方案是使用来自ES6 的Object.assign。

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

【讨论】：

小心使用 Object.assign 和嵌套对象。

【解决方案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
      }
    }
  }
})

【讨论】：