时间戳

首页 > 解决方案 > 自定义函数将 Vue.js 数据值更改为副作用

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

问题描述

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

这会以某种方式引起副作用，也会改变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>

标签： javascriptvue.jsjavascript-objectsside-effects

解决方案

您在这里面临的问题是，数据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))创建了一个新状态而不参考原始状态。

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

推荐阅读