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

Question

There is need to initalize Vue data "settings" from other object "original_settings" but not to change this object when data "settings" is changed. How to make it happen?

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

Answer 1

You can use JSON.parse(JSON.stringify(obj)) in order to create a deep clone copy of the object.

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

Another solution is to use Object.assign from ES6 .

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

Answer 2

I don't think this is the good solution. see documentation about data : https://v2.vuejs.org/v2/api/#data

documentation :

it is not recommended to observe objects with their own stateful behavior. Once observed, you can no longer add reactive properties to the root data object

If you need to bind data from external object, you can use computed properties to access them, or you can use a store (VueX).

you can do something like this :

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