Question

我有两个数据对象，分别称为item和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，但两个对象始终是链接的。

感谢您的帮助。

Answer 1

在处理完您的示例后，我注意到我们可以将您的AJAX提取对象简化为data = { 0: { key: 'agent'}，并且该属性将data[0]分配给对象{ key: 'agent'}的引用（{{1 }}可以称为嵌套对象）

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

但是请注意，这只会产生浅表副本。嵌套对象仍会复制为引用。

因此，您有两个选项可以在没有JQuery 的情况下起作用：

1。。使用data之类的JSON.parse和JSON.stringify进行字符串化然后解析您的对象

2。。进行循环以手动深度复制对象（如上面引用的线程的过时答案所示）

如果使用JQuery ，您可以将JSON.parse(JSON.stringify(data))选项设置为deep

来编写jQuery.extend(true ,{}, data)

Answer 2

是的，这是有原因的。此代码表示vm.items和vm.itemsOrg是相同的引用（数据）。

使用chrome devtools查看跟踪

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

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

2 个答案: