自定義 function 更改 Vue.js 數據值作為副作用

Question

我在方法屬性中有一個 function，它從data()方法中獲取passedData值，對 object 進行一些更改並將新值存儲在常量中

這在某種程度上會導致副作用，也會改變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>

Answer 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))創建了一個新的 state 而沒有引用原始數據。

請注意，這應該只是一種解決方法，它不是正確的 state 管理。