vue深浅拷贝的思索

1.问题

做热力图测试的时候，想保存默认值pointsArr，就设了个pointsArrO，然后保存的时候一直都是浅拷贝（直接把地址拿过来），pointsArrO会随着pointsArr变化而改变，这并不是我想要的。

2.解决方法

搜了下如何深拷贝，这个答主说的挺好的。

前端 深拷贝和浅拷贝 - 知乎 (zhihu.com)

Vue知识点——vue数据深拷贝方法 - 话·醉月 - 博客园 (cnblogs.com)

还参考了博客园其他小伙伴的代码进一步优化了。注意要把值返回！！！不然拷贝的值只会在局部函数作用域里面！

// get Default heapPoints
    // Remember arrGet need to be returned as new Arr.
    // Otherwise it only make effect in this function scope.
    getDefaultPoints(arrGet, arrFrom) {
      // Complex data type needs DEEP COPY.
      arrGet = JSON.parse(JSON.stringify(arrFrom));
      // arrGet = deepclone(arrFrom);
      console.log("Default Origin Arr Length", arrGet.length);
      return arrGet;

      // arrGet = JSON.parse(JSON.stringify(arrFrom));
      // deepclone function is same to the string upper.
      function deepclone(obj) {
        console.log("BEFORE DEEP CLONE", obj.length);
        let _obj = JSON.stringify(obj);
        let cloneObj = JSON.parse(_obj);
        console.log("AFTER DEEP CLONE", cloneObj.length);

        return cloneObj;
      }
    },

　　注意： 在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。不要对父组件传递来的引用类型数据进行过滤。

 

JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。

 JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。