vue 使用过程，新增同类数据，即时渲染情况中碰到问题

最新推荐文章于 2022-06-13 16:28:58 发布

weixin_30878501

最新推荐文章于 2022-06-13 16:28:58 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/quepq/p/11022331.html

本文介绍在Vue中使用深拷贝解决因对象地址引用导致的数据绑定问题，通过自定义深拷贝函数实现对对象和数组的完全复制，避免修改一处数据时影响到其他数据，保持数据独立性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue使用过程，我们新增同类数据，渲染极其方便，只要往当前数组中push数据就解决问题了，但是当你新增的数据类型用一个对象时，就出现问题，在js中对象是地址引用的，vue是数据驱动的，那么当改变其中一组数据时，其他的也会跟着改变，解决问题如下：

cloneDeep(target) {
    function isObject(obj) {
        return Object.prototype.toString.call(obj) === "[object Object]";
    }

    var _isObject = isObject(target);
    var _isArray = Array.isArray(target);
    if (_isObject || _isArray) {
        var newObj = {};
        for (var key in target) {
            newObj[key] = this.cloneDeep(target[key]);
        }
        return newObj;
    }
    return target;
},