Vue.js 为什么链接 2 个对象？答案

【问题标题】：Vue.js Why 2 objects are linked?Vue.js 为什么链接 2 个对象？
【发布时间】：2019-01-17 03:32:42
【问题描述】：

我有两个名为 items 和 itemsOrg 的数据对象

var vm = new Vue({
      el: '#divVM',
      mixins: [mix],     
      data: {
            items: [],
            itemsOrg:[],
            // ....
           },

当页面加载时，我进行 AJAX 调用以从 MySQL 表中获取数据并将其分配给 items 和 itemsOrg 对象。

function getMustacheVariables()
{
    $.ajax({
       type: "POST",
       url: "adminAjax.php", 
        data: { 
            actionID: 'GET_DATA', 
        },
        dataType: "json",

        success: function(data) 
        {
            vm.items= data; 
            vm.itemsOrg = data;
        }
        // ...

但是，当我更新 Vm.items 时， vm.itemsOrg 也会自动更新，不知道为什么这两个链接在一起。这是console.log的快照

vm.items[0]["key"] 
"agent"
vm.itemsOrg[0]["key"]
"agent"
vm.items[0]["key"] = "new_key"
"new_key"
vm.itemsOrg[0]["key"]
"new_key"
vm.itemsOrg[0]["key"] = "updated_key"
"updated_key"
vm.items[0]["key"] 
"updated_key"

这两个对象有联系的原因吗？我什至尝试使用 vm.items.slice() 以及 push() 将 vm.items 分配给 vm.itemsOrg，但是这两个对象始终是链接的。

感谢您的帮助。

【问题讨论】：

您正在为两者分配数据。你期待什么？
我原来的帖子有错字。请查看更新的代码。
我还是一样。
vm.items= data; vm.itemsOrg = data; 表示两个变量现在都引用同一个对象。您需要 clone data 而不是简单地将其他变量分配为等于它。
尝试对数组使用[...data]，或者对对象使用{...data}。

标签： javascript vue.js

【解决方案1】：

在玩了你的例子之后，我注意到我们可以将你的 AJAX 获取的对象简化为 data = { 0: { key: 'agent'} 并且它有这个属性 data[0] 分配给对象 { key: 'agent'} 的引用（data 可以称为嵌套对象)

因此，即使您使用Object.assign 复制data 对象，您仍然会在其中包含所有引用的对象。正如here 所说：

但请注意，这只会产生浅拷贝。嵌套对象仍被复制为引用。

所以您有两个选项可以不使用 JQuery：

1. 使用JSON.parse 和JSON.stringify 像JSON.parse(JSON.stringify(data)) 来字符串化然后解析你的对象

2. 循环手动深度复制对象（如上面引用的线程的过时答案）

如果使用 JQuery，您可以编写 jQuery.extend(true ,{}, data) 并将 deep 选项设置为 true

【讨论】：

【解决方案2】：

是的，这是有原因的。这段代码意味着 vm.items 和 vm.itemsOrg 是相同的 ref（数据）。

使用 chrome devtools 查看 Trace

    vm.items= data; 
    vm.itemsOrg = data;

【讨论】：

好的。我了解将相同的数据分配（引用）给 vm.items 和 vm.itemsOrg。在 vm.itemsOrg 中制作“数据”对象的静态副本的最佳方法是什么，当 vm.items 更改时该对象不会更改，{...data} 没有帮助。
试试这个：vm.itemsOrg = Object.assign({}, vm.items);
@Abderrahim Soubai Elidrissi: vm.itemsOrg = Object.assign({}, vm.items);不起作用。但是， vm.itemsOrg = jQuery.extend(true, {}, vm.items);作品
享受与 Object.assign 相同的主要思想；)