Tengo una función dentro de la propiedad de métodos que toma passedData del método data() , realiza algunos cambios en el objeto y almacena el nuevo valor en una constante
esto de alguna manera causa un efecto secundario que también cambia el valor de passedData . ¿Cuál es la causa y cómo puedo prevenir eso?
this.passedData: -->
{"propss":"value"} App.vue?3dfd:61 {"propss":"propss : value"} App.vue?3dfd:49 {"propss":"propss : value"} App.vue?3dfd:61 {"propss":"propss : propss : value"} new Vue({ el: "#app", data() { return { passedData: { propss: "value" }, }; }, methods: { displayData() { console.log(JSON.stringify(this.passedData)); const root = d3.hierarchy(this.passedData, function(d) { if(typeof d == "object") return Object.keys(d).filter(d=>d!="$name").map(k=>{ if(typeof d[k] == "object") d[k].$name = k; else d[k] = k + " : " + d[k]; return d[k]; }); }) console.log(JSON.stringify(this.passedData)); }, }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="displayData">display</button> </div>El problema que enfrenta aquí es que los datos en vue.js son reactivos. Por lo tanto, cambiar los datos almacenados en cualquier lugar también cambiará la fuente de los datos.
Si desea cambiar algo sin enfrentar problemas debido a la reactividad, debe asignar estos datos sin referencia según lo necesite. Pequeño ejemplo:
// Passing your reactive data passedData: { propss: "value" }, newData: {} // Passing data to new property and reactivity this.newData = this.passedData this.newData.propss = 'newValue' // this will change passedData.propss to "newValue" too // Assign Data without reference this.newData = JSON.parse(JSON.stringify(this.passedData)) Si ahora cambia newData , no afectará a passedData , ya que JSON.parse(JSON.stringify(this.passedData)) creó un nuevo estado sin referencia al original.
Tenga en cuenta que esto solo debería ser una solución alternativa, no es una gestión de estado adecuada.