Question

需要初始化Vue数据＆＃34;设置＆＃34;来自其他对象＆＃34; original_settings＆＃34;但是当数据＆＃34;设置＆＃34;时不要改变这个对象。改变了。如何实现？

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

Answer 1

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

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

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

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
      }
    }
  }
})

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

2 个答案: