自定义函数将 Vue.js 数据值更改为副作用答案

【问题标题】：custom function changes Vue.js data value as side effect自定义函数将 Vue.js 数据值更改为副作用
【发布时间】：2021-11-27 06:38:49
【问题描述】：

我在 methods 属性中有一个函数，它从 data() 方法中获取 passedData 值，对对象进行一些更改并将新值存储在常量中

这会以某种方式引起副作用，它也会改变passedData 的值。是什么原因，我该如何预防？

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>

【问题讨论】：

你正在改变它，d[k].$name = k。

标签： javascript vue.js javascript-objects side-effects

【解决方案1】：

您在这里面临的问题是，vue.js 中的数据是被动的。所以改变存储在任何地方的数据也会改变数据的来源。

如果您想更改某些内容而不会因反应性而遇到问题，则需要根据需要分配此数据而无需参考。小例子：

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

如果您现在更改newData，它不会影响passedData，因为JSON.parse(JSON.stringify(this.passedData)) 在不参考原始状态的情况下创建了一个新状态。

请注意，这应该只是一种解决方法，它不是正确的状态管理。

【讨论】：