Vue.js自定义函数操作data对象意外修改原始值的原因及解决办法

数据老陈

2026-10-1

问题诱因

JavaScript中对象属于引用类型，你直接将this.passedData的内存引用传入d3.hierarchy方法，没有做副本隔离
后续回调函数中的d[k].$name = k、d[k] = k + " : " + d[k]都是直接操作原对象的属性，自然会同步修改原始的passedData值，日志里的重复拼接也是因为每次调用方法都在已修改的原数据基础上再操作导致的。

解决方法

你只需要在传入数据前对原始对象做深拷贝，后续所有修改都作用在拷贝后的对象上即可，示例修改后的代码如下：

new Vue({
  el: "#app",
  data() {
    return {
      passedData: { propss: "value" },
    };
  },
  methods: {
    displayData() {
      console.log(JSON.stringify(this.passedData));
      // 先做深拷贝，不直接操作原对象
      const copyData = JSON.parse(JSON.stringify(this.passedData))
      const root = d3.hierarchy(copyData, 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)); // 此时原数据不会被修改
    },
  },
});