Question

我第一次使用Vue，我很困惑为什么我的一个Vue对象在数据发生变化时会不断更新，另一个Vue对象不会。

我有一个像这样的JavaScript模块基本上只保存数据：

var MyModule = (function(){

    const info = {
        requestCount: 20,
        arrayOfItems: []
    }

    return info;
})();

我有这个HTML：

<span id='requestCounter' class='badge'>{{count}}</span>

<table id='vueTable'><tr v-for="item in items"><td>{{item.description}}</td></tr></table>

最后，我有这个JavaScript文件来做所有事情：

window.onload = function(){
    var mainTable = new Vue({
        el: '#vueTable',
        data: {
            items: MyModule.arrayOfItems
        }
    });

    var requestCounterVue = new Vue({
        el: '#requestCounter',
        data: {
            count: MyModule.requestCount
        }
    });
}

在第一个问题上，一切都按预期运作。更改MyModule.arrayOfItems正常工作后，表会根据数组中的内容进行更新。但是，更改MyModule.requestCount不会做任何事情。谁能告诉我我在这里做错了什么？

（请注意，我的示例已经过简化，以使我的问题更容易）

Answer 1

您正在从MyModule初始化Vue对象中的数据。这不会使MyModule成为正确的商店或控制器。奇怪的行为不是requestCount没有做出反应，而是arrayOfItems做出的反应。

数组行为的原因是对象是通过引用传递的，所以当你初始化items时，Vue会抓住实际的数组对象并对其进行魔术处理。实际上，MyModule为您的Vue数据提供了一个外部句柄。

另一方面，

requestCount是一个简单的值，而不是一个对象，所以它是按值传递的，MyModule中的成员与{{1}中的数据项之间绝对没有关系。 }。

Answer 2

罗伊是完全正确的。我刚刚离开这里，因为我在回答的时候打字，可能还有更多的解释不会伤害。

MyModule不会因为你用它来初始化你的Vues中的值而变得被动。我希望arrayOfItems的工作方式与您期望的方式相同，因为您实际上并未将其设置为新数组，而是在改变现有数组。

例如，您在此处定义了使用数组的Vue。

var mainTable = new Vue({
    el: '#vueTable',
    data: {
        items: MyModule.arrayOfItems
    }
});

如果您向MyModule.arrayOfItems添加值

MyModule.arrayOfItems.push('my new value')

然后您的Vue将显示新值。这是因为mainTable.items和MyModule.arrayOfItems是指向相同数组的指针。

但是，如果您改为MyModule.arrayOfItems，则

MyModule.arrayOfItems = ['my','new','array']

然后mainTable将不显示更新后的数组。这是因为您已将其更改为完全不同的数组。换句话说，MyModule.arrayOfItems !== mainTable.items。

这也是将MyModule.count更改为新值的原因，而requestCounterVue中未反映这一点。 MyModule.count是一个原始值，当您使用requestCounterVue初始化count时，它会使用该值的副本并使副本具有反应性。更改MyModule.count将无效。

如果您希望看到所反映的更改，您可能会做的就是以这种方式初始化您的Vues

var mainTable = new Vue({
    el: '#vueTable',
    data: MyModule
});

当实例化Vue时，MyModule将变为被动对象，并且count和arrayOfItems都会反映出更改。

为什么一个Vue实例随数据更新而另一个视图实例没有？

2 个答案: